Vue 中利用 eventBus 进行数据通信的问题

使用 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-…