Vue 2.0使用EventBus

在项目开发中遇到全局组件监听事件，向各页面组件中派发的需求，然而翻遍了各种文档，也没找到合适的子组件监听父组件数据更改的方法，同事推荐了事件总线EventBus，经过查阅了解，这种全局监听、派发的模式显然可以轻松解决问题。然而新的插件往往带来新的bug（探索之路没有坦途(+﹏+)）！

1.全局引入eventBus

//main.js
Vue.prototype.$EventBus = new Vue();

2.全局组件调用时触发

// APP.vue
dataChange (data) {
    this.$EventBus.$emit('addDataListener', data)
}

3.页面中监听事件

// list.vue
// 页面加载完成后监听全局事件
// 注：放到created生命周期会在上一页的beforeDestroy事件之后触发，导致上一页的取消监听事件失效，会多次触发该事件！！！
mounted () {
    this.$EventBus.$on('addDataListener', (data) => {
        // ...
    })
},
// 页面卸载前取消监听事件
// 注：多个页面需要监听同一事件时，为避免多次触发，需要取消监听
beforeDestroy () {
    this.$EventBus.$off("addDataListener");
}

总结

Vue中EventBus的引入可以让Vue在各组件通信上补足短板，事件的监听和触发更加自由，可能常用的场景：监听全局数据改变事件、即时通讯、跨项目事件调用等。