uni-app之頁面通訊——uni.$emit、uni.$on、uni.$once、uni$off

uni.$emit(eventName,Object)

觸發全局的自定義事件，附加參數都會傳給監聽器回調函數。

屬性	類型	描述
eventName	String	事件名
Object	Object	觸發全局的自定義事件，附加參數都會傳給監聽器回調函數。

示例代碼如下：

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

uni.$on(eventName,callback)

監聽全局的自定義事件，事件由 uni.$emit 觸發，回調函數會接收事件觸發函數的傳入參數。

屬性	類型	描述
eventName	String	事件名
callback	Function	事件的回調函數。

示例代碼如下：

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

uni.$once(eventName,callback)

監聽全局的自定義事件，事件由 uni.$emit 觸發，但僅觸發一次，在第一次觸發之后移除該監聽器。

屬性	類型	描述
eventName	String	事件名
callback	Function	事件的回調函數。

uni.$off([eventName, callback])

移除全局自定義事件監聽器。

屬性	類型	描述
eventName	String	事件名
callback	Function	事件的回調函數。

• 如果uni.$off沒有傳入參數，則移除App級別的所有事件監聽器；
• 如果只提供了事件名（eventName），則移除該事件名對應的所有監聽器；
• 如果同時提供了事件與回調，則只移除這個事件回調的監聽器；
• 提供的回調必須跟$on的回調為同一個才能移除這個回調的監聽器；

代碼示例

$emit、$on、$off常用於跨頁面、跨組件通訊，這里為了方便演示放在同一個頁面。

<template>
        <view class="content">
            <view class="data">
                <text>{{val}}</text>
            </view>
            <button type="primary" @click="comunicationOff">結束監聽</button>
        </view>
    </template>

    <script>
        export default {
            data() {
                return {
                    val: 0
                }
            },
            onLoad() {
                setInterval(()=>{
                    uni.$emit('add', {
                        data: 2
                    })
                },1000)
                uni.$on('add', this.add)
            },
            methods: {
                comunicationOff() {
                    uni.$off('add', this.add)
                },
                add(e) {
                    this.val += e.data
                }
            }
        }
    </script>

    <style>
        .content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .data {
            text-align: center;
            line-height: 40px;
            margin-top: 40px;
        }

        button {
            width: 200px;
            margin: 20px 0;
        }
    </style>

• uni.$emit、 uni.$on 、 uni.$once 、uni.$off 觸發的事件都是 App 全局級別的，跨任意組件，頁面，nvue，vue 等
• 使用時，注意及時銷毀事件監聽，比如，頁面 onLoad 里邊 uni.$on 注冊監聽，onUnload 里邊 uni.$off 移除，或者一次性的事件，直接使用 uni.$once 監聽

參考網址

• 頁面通訊：https://uniapp.dcloud.io/api/window/communication?id=emit