Vue组件通讯之Bus

关于组件通讯我相信小伙伴们确定也都很熟悉，就很少说了，对组件通讯还不熟悉的小伙伴移步这里。
在vue2.0中 $dispatch 和 $broadcast 已经被弃用。官方文档中给出的解释是：

由于基于组件树结构的事件流方式实在是让人难以理解，而且在组件结构扩展的过程当中会变得愈来愈脆弱。这种事件方式确实不太好，咱们也不但愿在之后让开发者们太痛苦。而且$dispatch 和 $broadcast 也没有解决兄弟组件间的通讯问题。

官方推荐的状态管理方案是 Vuex。不过若是项目不是很大，状态管理也没有很复杂的话，使用 Vuex 有种杀鸡用牛刀的感受，固然，这也是要根据本身的需求来的，只是建议。

vue官方文档中有这样一个定义：非父子组件的通讯，内容不多，以下：

其实关于这个非父子组件通讯的demo仍是有的，它藏在了$dispatch 和 $broadcast的迁移文档中，有兴趣的小伙伴能够点击进去查看。文档中的建议就是：

对于$dispatch 和 $broadcast最简单的升级方式就是：经过使用事件中心，容许组件自由交流，不管组件处于组件树的哪一层。因为 Vue 实例实现了一个事件分发接口，你能够经过实例化一个空的 Vue 实例来实现这个目的。

这个集中式的事件中间件就是 Bus。我习惯将bus定义到全局：

app.js

var eventBus = {
    install(Vue,options) {
        Vue.prototype.$bus = vue
    }
};
Vue.use(eventBus);

而后在组件中，可使用$emit， $on， $off 分别来分发、监听、取消监听事件：

分发事件的组件

// ...
methods: {
  todo: function () {
    this.$bus.$emit('todoSth', params);  //params是传递的参数
    //...
  }
}

监听的组件

// ...
created() {
  this.$bus.$on('todoSth', (params) => {  //获取传递的参数并进行操做
      //todo something
  })
},
// 最好在组件销毁前
// 清除事件监听
beforeDestroy () {
  this.$bus.$off('todoSth');
},

若是须要监听多个组件，只须要更改 bus 的 eventName:

// ...
created() {
  this.$bus.$on('firstTodo', this.firstTodo);
  this.$bus.$on('secondTodo', this.secondTodo);
},
// 清除事件监听
beforeDestroy () {
  this.$bus.$off('firstTodo', this.firstTodo);
  this.$bus.$off('secondTodo', this.secondTodo);
},

若是文章有错误或是有什么疑问，欢迎在评论中交流。