uni.$emit(eventName,OBJECT)

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

示例代碼如下：

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

uni.$on(eventName,callback)

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

示例代碼如下：

uni.$on('update',function(data){ console.log('監(jiān)聽到事件來自 update ，攜帶參數(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ù)寫入即可。實際應(yīng)用例子如下：

組件中：

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

},

demo頁面中:

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

測試最終結(jié)果：

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

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

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

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

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

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

<template>
  <view>
    <button @tap="click">
      點擊發(fā)射
    </button>
 
  </view>
</template>
<script>
  import Vue from "vue";
  export default {
    methods: {
      click() {
        // 【非常重要】必須先跳轉(zhuǎn)打開頁面,才能發(fā)射參數(shù),否則發(fā)射無效，接收頁面無法接收
        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如何頁面?zhèn)鲄?shù)的幾種方法總結(jié)的文章就介紹到這了,更多相關(guān)uni-app 頁面?zhèn)鲄?shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論