在快應用開發過程中，開發者會經常面臨多頁面之間的參數傳遞問題，今天我們就詳細介紹幾種常見的方法，并介紹一下各自的特點。
- 擷取全局參數：通常用于全局配置，例如位置、步數、彈幕模式等等，由于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
![【快應用】如何實作快應用頁面退出時彈框确認[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)