uni.$emit(eventName,OBJECT)

• 觸發(fā)全局的自定事件。附加參數(shù)都會(huì)傳給監(jiān)聽器回調(diào)。
• 其中eventName為事件名，OBJECT為觸發(fā)事件附加參數(shù)

示例代碼如下：

uni.$emit('update',{msg:'頁(yè)面更新'})

uni.$on(eventName,callback)

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

示例代碼如下：

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

作用
實(shí)際開發(fā)中對(duì)于觸發(fā)頁(yè)面的動(dòng)態(tài)更新將非常有效。
例如移動(dòng)端項(xiàng)目通過自己編寫的組件替代tabbar進(jìn)行tabar跳轉(zhuǎn)，恰逢這時(shí)某個(gè)頁(yè)面如微信支付成功，需要返回這個(gè)tabbar頁(yè)面，你會(huì)發(fā)現(xiàn)他不會(huì)像普通uni頁(yè)面（onshow生命周期）一樣會(huì)動(dòng)態(tài)刷新，這就很影響用戶實(shí)際體驗(yàn)。因此這個(gè)方法就很有效，只需要在組件中寫入uni.emit(update.masq:'頁(yè)面刷新')然后在頁(yè)面使用uni.on('update',function(data){ console.log('監(jiān)聽到事件來自 update ，攜帶參數(shù) msg 為：' + data.msg); })接收，將函數(shù)寫入即可。實(shí)際應(yīng)用例子如下：

組件中：

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

},

demo頁(yè)面中:

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

測(cè)試最終結(jié)果：

針對(duì)于頁(yè)面?zhèn)鲄⒄?qǐng)直接使用Vue的全局變量更方便 ，因?yàn)閡ni-app框架的uni.$emit()和$on() 雖然使用了定時(shí)器能接收到參數(shù)，但是不知道為什么第一次總是接收不到導(dǎo)致很多為！后續(xù)有時(shí)間在慢慢研究為什么？但是使用Vue的全局變量能搞定一切！

如何使用uni.$emit()和uni.$on() 進(jìn)行頁(yè)面間通訊【有一個(gè)坑務(wù)必注意】

參考官方文檔，然后記住一句話：

必須先跳轉(zhuǎn)打開頁(yè)面,才能發(fā)射參數(shù),否則發(fā)射無效，接收頁(yè)面無法接收

其次，如果遇到一次接收無效可能需要發(fā)送的時(shí)候增加一個(gè)定時(shí)器，不然接收$on的回調(diào)函數(shù)可能不執(zhí)行

參考官方文檔：https://ask.dcloud.net.cn/article/36010

<template>
  <view>
    <button @tap="click">
      點(diǎn)擊發(fā)射
    </button>
 
  </view>
</template>
<script>
  import Vue from "vue";
  export default {
    methods: {
      click() {
        // 【非常重要】必須先跳轉(zhuǎn)打開頁(yè)面,才能發(fā)射參數(shù),否則發(fā)射無效，接收頁(yè)面無法接收
        Vue.prototype.$uniReLaunch("/pages/test/test001");
        uni.$emit("test", {
          test: "成功",
        });
        console.log("發(fā)射事件test成功");
      },
    },
  };
</script>

<template>
  <view></view>
</template>
<script>
  export default {
    onLoad() {
      uni.$on("test", (data) => {
        console.log("接收事件test成功,data=", data);
      });
    },
  };
</script>

到此這篇關(guān)于uni-app如何頁(yè)面?zhèn)鲄?shù)的幾種方法總結(jié)的文章就介紹到這了,更多相關(guān)uni-app 頁(yè)面?zhèn)鲄?shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！