如何使用uni.$emit()和uni.$on() 進行頁面間通訊

自 HBuilderX 2.0.0 起支持 uni.$emit、 uni.$on 、 uni.$once 、uni.$off ，可以方便的進行頁面的通訊 ，觸發的事件都是 App 全局級別的，跨任意組件，頁面，nvue，vue 等。事件詳情

具體如何使用呢？我們假設一個場景，進入app,是未登陸狀態，需要在我的頁面點擊登陸，進入登陸頁面進行登陸。登陸成功之后，返回到我的頁面，實時顯示登陸后的用戶信息。

監聽事件

首先，在我的頁面監聽事件。

// 我的頁面  
onLoad(){  
    // 監聽事件  
    uni.$on('login',(usnerinfo)=>{  
        this.usnerinfo = usnerinfo;  
    })  
},  
onUnload() {  
    // 移除監聽事件  
        uni.$off('login');  
    },

因為事件監聽是全局的，所以使用 uni.$on ，需要使用 uni.$off 移除全局的事件監聽，避免重復監聽。

觸發事件

進入登陸頁面，觸發事件

// 登陸頁面  
uni.$emit('login', {  
                avatarUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/10.jpg',  
                token: 'user123456',  
                userName: 'unier',  
                login: true  
            });

使用 uni.$emit 觸發事件后，對應的 uni.$on 就會監聽到事件觸發，在回調中去執行相關的邏輯。

更多使用場景

以上只是一個簡單的場景應用。而我們開發中會遇到很多頁面間通訊場景，如：

• vue 與 nvue，nvue 與 vue 間的通訊
• tabbar 頁面之間的通訊
• 父頁面與多級子頁面間的通訊

基本上述場景均可以實現，本質上就是一個頁面通知另一個面我發生了變化，你需要處理一下。絕大部分頁面的通訊都可以使用 uni.$emit、 uni.$on 、 uni.$once 、uni.$off 四個事件完成。

Tips

• 如果頁面沒有打開，將不能 注冊監聽事件 uni.$on 和 uni.$once 。
• 一次性的事件，直接使用 uni.$once 監聽，不需要移除。
• 關於有些頁面onLoad用不了用onShow。onLoad是頁面刷新加載完后執行的就會在某種情況下導致監聽事件失效。比如【tab底部導航】