Vue中的事件总线

导读

在用Vue框架的时候，组件（component）是我们必不可以少创建的，组件既可以作为父组件，也可以作为子组件和兄弟组件。但如何让它们之间互相通信呢？

大家用的比较多应该就是父子组件之间的通信了，父组件可以通过 props 给子组件传递参数，子组件可以通过 $emit 事件告诉父组件该干嘛干嘛了。

那么如果要实现兄弟组件间的通信呢？兄弟组件基于同一个父组件，之前有一个比较传统的做法，比如要实现A组件和B组件两个兄弟组件的通信。

就是A组件通过 $emit 告诉它爹，我这边ok了，然后父组件通过 watch 监听某个信息数据，信息数据发生变化了，那么可以告诉B组件去做后面的事情了，相当于父组件做了个中间商。

听起来是不是很麻烦，那么 事件总线（EventBus） 就能很好的处理这类情况。

EventBus简介

EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的“灾难”，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。（来源于网络）

如何创建EventBus

// main.jsVue.prototype.$bus = new Vue();

这种方式初始化的 EventBus 是一个全局的事件总线，里面是没有声明绑定的事件。

通过Vue的原型对象构建的时间总线，那么我们直接可以在项目中用 this 来调用。

接着上面说的，我们要在A组件中，告诉B组件做一件事情，比如：吃饭。

利用EventBus发送事件

那么我们在A组件中绑定吃饭事件：

onConfirm() {   //发出事件   this.$bus.$emit('eating', '吃饭啦');},

eating 是事件名称，当触发了 onConfirm方法后，就可以发出事件。

接收事件

然后在B组件中挂载的注册监听，当A发出，B自然就能接收到了。

mounted() {    this.$bus.$on('eating', value => {        console.log(value);     });    //=> '吃饭啦'},

销毁事件

由于事件总线非常消耗资源，所以记得在组件中销毁这些创建的事件。

我们在可以在组件的被销毁之前去销毁它。

beforeDestroy() {        this.$bus.$off('eating'); //销毁事件    },

总结

本文主要通过简单的实例学习了Vue中有关于 EventBus 相关的知识点。主要涉及了 EventBus 如何实例化，又是如何通过 $emit 发送事件，又是如何通过 $on 来接收事件和销毁事件。从实例中我们可以了解到， EventBus 可以较好的实现兄弟组件之间的数据通讯。

不必纠结于当下，也不必太忧虑未来，当你经历一些事情的时候，眼前的风景已经和从前不一样了。

--《1Q84》