快应用参数传递
在快应用开发过程中，开发者会经常面临多页面之间的参数传递问题，今天我们就详细介绍几种常见的方法，并介绍一下各自的特点。
-
获取全局参数：通常用于全局配置，例如位置、步数、弹幕模式等等，由于JS是单线程的，保证了变量的线性安全。
方式一：在mainfest.json的congfig.data中定义用户全局变量hellowDemo，例如位置信息、步数等，在其他页面通过this.$app.$data.helloDemo获取，并修改参数值
"config": {
"data":{
"helloDemo":"This is a demo"
}
},
方式二：在app.ux的data中定义{index:”” } ，其他页面通过this.$app.$def.data.index获得
<script>
module.exports = {
onCreate() {
console.info('Application onCreate');
},
onDestroy() {
console.info('Application onDestroy');
},
//此处定义全局变量index
data: {
index:0
}
}
</script>
其他页面获取使用变量
<template>
<div style="flex-direction: column">
<text>{{title}}:{{count}}</text>
<input type="button" onclick="addnum" value="add" />
</div>
</template>
<script>
export default {
private: {
count: "",
title: ""
},
onShow(options) {
this.title = this.$app.$data.helloDemo;
this.count = this.$app.$def.data.index;
},
addnum() {
//方式一
this.$app.$data.helloDemo = this.$app.$data.helloDemo === "This is a demo"? "This is not a demo" : "This is a demo";
this.title = this.$app.$data.helloDemo;
//方式二
this.$app.$def.data.index += 10;
this.count = this.$app.$def.data.index;
}
}
</script>
-
父子组件之间传值：
父组件传值给子组件
方式一，通过子组件定义props暴露属性，一般都是先把子组件开发完，使用三方组件也属于这种方式）
通过子组件child的props定义变量/属性（parnet、childName、childAge）
在父组件中通过<child parent="{{setParent}}" child-name="{{setChildName}}" child-age="{{setChildAge}}"> </child>传参
父组件代码：
<import name="child" src="../Child/child.ux"></import>
<template>
<div class="container">
<child child-name="{{setChildName}}" child-age="{{setChildAge}}"></child>
<input type="button" value="NextChild" onclick="InitChild" />
</div>
</template>
<script>
module.exports = {
private: {
setChildName: "xiaoming",
setChildAge: 18
},
InitChild: function () {
this.setChildName = this.setChildName === "xiaoming"?"xiaohong":"xiaoming";
this.setChildAge = this.setChildAge === "18"?"20":"18";
}
}
</script>
子组件代码：
<template>
<div class="container">
<text class="child">Child name is ：{{myName}}</text>
<text class="child">Child age is ：{{myAge}}</text>
</div>
</template>
<script>
module.exports = {
//props支持array和Object两种类型
//方式一
props: ['childName', 'childAge', 'parent'],
//方式二
// props:{
// childName:"",
// childAge:""
// },
computed: {
myName: {
get()
{ return this.childName },
set(value)
{
this.childName = value;
}
},
myAge: {
get()
{ return this.childAge },
set(value)
{
this.childAge = value;
}
}
}
}
</script>
方式二，通过广播的方式，在广播事件内通过evt.detail实现参数传递，记重点:只能向下传递，一直向下传递，除非被Stop，
示例代码：父组件分别引入child/child2两个自定义组件，并通过按钮Start发送广播
<import name="child1" src="../Child/child.ux"></import>
<import name="child2" src="../Child/child2.ux"></import>
<template>
<div class="container">
<child1></child1>
<child2></child2>
<input type="button" value="Start" onclick="Start" />
</div>
</template>
<script>
module.exports = {
private: {
setChildName: "xiaoming",
setChildAge: 18
},
Start: function () {
console.log("start broadcast");
this.setChildName = this.setChildName === "xiaoming"?"xiaohong":"xiaoming";
this.setChildAge = this.setChildAge === "18"?"20":"18";
this.$broadcast('listensEveryOne',{"childName":this.setChildName,"childAge":this.setChildAge}) //开始广播，向下传递childName、childAge、parent
}
}
</script>
Child组件：引入grandson组件，定义listensEveryOne接受广播，并通过evt.detail获取广播信息
<import name="grandson" src="../Child/grandson.ux"></import>
<template>
<div class="container">
<text class="child">Child name is ：{{myName}}</text>
<text class="child">Child age is ：{{myAge}}</text>
<grandson></grandson>
</div>
</template>
<script>
module.exports = {
data() {
return {
myName: "",
myAge:""
}
},
onInit: function () {
this.$on('listensEveryOne', this.listensEveryOne)
},
listensEveryOne(evt) {
this.myName = evt.detail.childName;
this.myAge = evt.detail.childAge;
}
}
</script>
Child2组件,引入grandson，定义listensEveryOne接受广播，并stop广播，终止后子组件grandson.ux不再收到广播
<import name="grandson" src="../Child/grandson.ux"></import>
<template>
<div class="container">
<text class="child">Child name is ：{{myName}}</text>
<text class="child">Child age is ：{{myAge}}</text>
<grandson></grandson>
</div>
</template>
<script>
module.exports = {
data() {
return {
myName: "xiaohong",
myAge: "20"
}
},
onInit: function () {
this.$on('listensEveryOne', this.listensEveryOne);
},
listensEveryOne(evt) {
evt.stop();
}
}
</script>
Grandson.ux组件，接受可以打开或关闭接受广播
<template>
<div class="container">
<text class="child">Child name is ：{{myName}}</text>
<text class="child">Child age is ：{{myAge}}</text>
<input id="hiO" type="button" value="{{btnValue}}" onclick="change"/>
</div>
</template>
<script>
module.exports = {
data() {
return {
myName: "",
myAge:"",
btnValue:"Close"
}
},
onInit: function () {
this.$on('listensEveryOne', this.listensEveryOne)
},
listensEveryOne(evt) {
this.myName = evt.detail.childName;
this.myAge = evt.detail.childAge;
},
change: function() {
if(this.btnValue==="Close")
{
this.$off('listensEveryOne', this.listensEveryOne);
this.btnValue = "Open"
}
else{
this.$on('listensEveryOne', this.listensEveryOne)
this.btnValue = "Close";
}
}
}
</script>
2.子组件向父组件传值
方式一：通过dispatch方式，与broadcast相反，dispatch只能向上传递，一直冒泡,如果想要停止在响应方法中执行stop，实例代码如下：
父组件：添加事件tellevt句柄listenSon，用来接受冒泡事件
<import name="child1" src="../Child/child.ux"></import>
<import name="child2" src="../Child/child2.ux"></import>
<template>
<div class="container">
<text class="title">My grandson is:{{setChildName}}</text>
<child1></child1>
<child2></child2>
</div>
</template>
<script>
module.exports = {
private: {
setChildName: "",
},
onInit: function () {
this.$on('tellevt', this.listenSon)
},
listenSon(evt) {
console.log("myName:",evt.detail.grandSonName);
this.setChildName = evt.detail.grandSonName;
}
}
</script>
组件一：从grandson组件中获取sonName
<import name="grandson" src="../Child/grandson.ux"></import>
<template>
<div class="container">
<text class="child">My son name ：{{sonName}}</text>
<grandson></grandson>
</div>
</template>
<script>
module.exports = {
data() {
return {
sonName: "",
}
},
onInit: function () {
this.$on('tellevt', this.listenSon)
},
listenSon(evt) {
this.sonName = evt.detail.grandSonName;
}
}
</script>
组件二：定义事件处理句柄，并在句柄中调用stop,停止继续冒泡
<import name="grandson" src="../Child/grandson.ux"></import>
<template>
<div class="container">
<text class="child">My son name ：{{sonName}}</text>
<grandson></grandson>
</div>
</template>
<script>
module.exports = {
data() {
return {
sonName: ""
}
},
onInit: function () {
this.$on('tellevt', this.listenSon)
},
listenSon(evt) {
this.sonName = evt.detail.grandSonName;
evt.stop()
}
}
</script>
组件三：定义冒泡事件，传递参数myName
<template>
<div class="container">
<text class="child">Child name is ：{{myName}}</text>
<input id="hiO" type="button" value="showMyName" onclick="dispatchEvt" />
</div>
</template>
<script>
module.exports = {
data() {
return {
myName: "xiaoMing",
}
},
dispatchEvt: function () {
this.$dispatch('tellevt', { grandSonName: this.myName })
}
}
</script>
方式二：通过$emit执行父组件方法，注意：跨层调用需要使用$listeners
父组件：绑定组件事件，childEvt添加句柄listenSon，ongrandson同样添加句柄listenSon，
<import name="child1" src="../Child/child.ux"></import>
<import name="child2" src="../Child/child2.ux"></import>
<template>
<div class="container">
<text class="title">My name is:{{setName}}</text>
<child1 onchild-evt="listenSon"></child1>
<child2 ongrandson="listenSon" ></child2>
</div>
</template>
<script>
module.exports = {
private: {
setName: "",
},
listenSon(evt) {
this.setName = evt.detail.myName;
}
}
</script>
组件一：因为是直接被父组件使用，可直接在script中通过$emit触发childEvt事件，执行父窗口的listenSon方法,通过$emit的params携带参数，在父组件的响应句柄中通过evt.detail.**获取，完成子组件到服务间的参数传递
<import name="grandson" src="../Child/grandson.ux"></import>
<template>
<div class="container">
<text class="child">My parent is ：{{parentName}}</text>
<input type="button" value="setParnetName" onclick="setParnetName" />
</div>
</template>
<script>
module.exports = {
data() {
return {
parentName: ""
}
},
setParnetName: function() {
this.parentName = 'Mr Li';
this.$emit('childEvt', {myName: this.parentName});
}
}
</script>
组件二：如果事件需要扩层级传递，需要在透传组件增加$listeners
<import name="grandson" src="../Child/grandson.ux"></import>
<template>
<div class="container">
<grandson $listeners></grandson>
</div>
</template>
组件三：第三层组件，通过$emit执行父组件方法
<template>
<div class="container">
<input type="button" value="set Z's Parent" onclick="setParnetName" />
</div>
</template>
<script>
module.exports = {
setParnetName: function () {
this.parentName = 'Mr Z';
this.$emit('grandson', { myName: this.parentName });
}
}
</script>
-
页面间传值：通过router.push方法的params携带参数，类似URL跳转时通过https://****/index.html?name=**&value=**传递参数
页面一：
<template>
<div class="container">
<input type="button" value="GoChild" onclick="goChild" />
</div>
</template>
<script>
import router from '@system.router';
module.exports = {
data() {
return {
titiless: ""
}
},
goChild: function () {
router.push({
uri: '/Brother',
params: {musicKey:"1",musicName:"zuiweidadezuopin"}
})
}
}
</script>
目标页面：通过名称相同的变量接受，记重点：名称相同且不能为private类型的
<script>
import router from '@system.router';
module.exports = {
data: {
musicName: '',
musicKey:""
},
goChild: function () {
router.push({
uri: '/Child',
})
}
}
</script>
还有一种消息通道方式的，没有想到使用场景，就先不介绍了，官方论坛有使用说明
欲了解更多更全技术文章，欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh
