Vue 中利用 eventBus 進行資料通訊的問題

要吃早餐發表於2018-06-25
Vue

使用 Vue 開發的時候，非父子元件傳遞資料經常會用到 eventBus。

const EVENT_BUS = new Vue();
Object.defineProperties(Vue.prototype, {
    $bus: function () {
        return EVENT_BUS;
    }
})
// 子元件
this.$bus.emit('event', a);

// 祖先元件
this.$bus.on('event', function (a) {
    console.log('傳遞的資料為：', a);
})
複製程式碼

需要注意的一點是：這樣繫結的事件，在元件銷燬的時候，並不會自動解除。每次切換元件都會新增一次事件，導致事件多次執行。解決辦法就是手動解除。在元件即將銷燬的鉤子函式中，解除繫結。

// 祖先元件
beforeDestroy () {
    this.$bus.$off('event');
}
複製程式碼

$off的詳細用法參考：cn.vuejs.org/v2/api/#vm-…

相關文章