uniapp頁面?zhèn)鲄⒌娜N方式實例總結

更新時間：2022年11月24日 15:28:04 作者：隔壁家的帥小姐

在進行頁面的跳轉的時候,往往需要我們將一些參數(shù)攜帶著傳遞過去這里的class樣式,下面這篇文章主要給大家介紹了關于uniapp頁面?zhèn)鲄⒌娜N方式,需要的朋友可以參考下

一，uni.$emit(eventName,OBJECT)

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

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

代碼如下：

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

二， uni.$on(eventName,Callback)

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

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

代碼如下：

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

作用：

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

比如說移動項目通過自己編寫的組件（tabbar）進行tabar跳轉，這個時候要是某應該頁面微信支付成功了，需要返回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跳轉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')
	})
},