子頁面返回父頁面?zhèn)鲄?，使用uni.$emit和uni.$on頁面通訊

一，uni.$emit(eventName,OBJECT)

觸發(fā)全局的自定義事件，附加參數(shù)都會傳給監(jiān)聽回調(diào)。

eventName為事件名，object為觸發(fā)事件附加參數(shù)。

代碼如下：

uni.$emit('gotoNext',{msg:'刷新頁面'})

二， uni.$on(eventName,Callback)

監(jiān)聽全局自定義事件，事件由uni.$emit()觸發(fā)，回調(diào)函數(shù)會接收所有傳入的數(shù)。

eventName為事件名，Callback為回調(diào)函數(shù)。

代碼如下：

uni.$on('goto',function(data){console.log('監(jiān)聽到事件來自goto,所帶參數(shù)msg 為：' +data.msg)})

作用：

開發(fā)中對觸發(fā)頁面動態(tài)更新將非常又效果。

比如說移動項目通過自己編寫的組件（tabbar）進行tabar跳轉(zhuǎn)，這個時候要是某應該頁面微信支付成功了，需要返回tabbar頁面，你會發(fā)現(xiàn)，它不會像其他普通的uni頁面，（onshow生命周期）會動態(tài)刷新，影響用戶體驗。所以這個方法很有效，只需要在組件中寫入uni.emit(update.masq:'頁面刷新')然后在頁面使用uni.on('update',function(data){ console.log('監(jiān)聽到事件來自 update ，攜帶參數(shù) msg 為：' + data.msg); })接收，將函數(shù)寫入即可。實際應用例子如下：

onShow() {
switch (this.Tab){
case 'demo':
uni.$emit('goto',{msg:'頁面更新'});
break;
}
 
},

text頁面

created() {
uni.$on('goto', (res) => {
this.list()
console.log(res, '更新');
})
},

三，uni.$off([eventName, callback])移除全局自定義事件監(jiān)聽器。

針對于頁面?zhèn)鲄⒄堉苯邮褂肰ue的全局變量更方便 ，因為uni-app框架的uni.$emit()和$on() 雖然使用了定時器能接收到參數(shù)，但是不知道為什么第一次總是接收不到導致很多為！但是使用Vue的全局變量能搞定一切！

最后一個小舉例：

//從A跳轉(zhuǎn)B頁面，B頁面返回A頁面時傳參
//B頁面
uni.$emit("targetEvent",{shiftOverId:that.shiftOverId,productOrderId:that.productOrderId })
uni.navigateBack();
 
//A頁面
onLoad: function (e) {
	uni.$on("targetEvent",(e)=>{
		 this.preId =  JSON.parse(e.shiftOverId)
		 this.productOrderId = JSON.parse(e.productOrderId)
		 uni.$off('targetEvent')
	})
},

總結(jié)

到此這篇關(guān)于uniapp頁面?zhèn)鲄⒌娜N方式的文章就介紹到這了,更多相關(guān)uniapp頁面?zhèn)鲄?nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論