开发一个vue中央事件总线插件vue-bus

2018/09/03 15:44 分类：技术交流浏览：26

大家都知道，一个中央事件总线bus，可以作为一个简单的组件传递数据，用于解决跨级和兄弟组件通信问题，那么，这篇文字，我将使用这种思想，将bus封装为一个Vue的插件，可以在所有的组件间任意使用，而不需要导入bus。

首先，我们使用vue-cli创建一个项目vue-bus, 在src目录下，新建vue-bus.js文件，vue-bus插件像vue-router 和 Vuex一样，给Vue对象添加一个属性$bus,并代理$emit、$on、$off三个方法。代码如下：

在main.js中使用插件，代码如下：

接下来，在views目录下，新建一个组件 Counter.vue,代码如下：

在index.vue 组件中，使用Counter组件并监听来自counter.vue的自定义事件，代码如下：

那么，这样，我们只需要很少的代码，就能够解决跨组件通信的问题，而且通过插件的形式使用后，所有组件都可以直接使用$bus，而无需每个组件都导入bus组件。

使用vue-bus有两点需要注意，第一是$bus.on应该在created钩子内使用，如果在mounted使用，它可能接收不到其他组件来自created钩子内发出的事件；第二点是使用了$bus.on在beforeDestory钩子里应该需要使用$bus.off解除，因为组件销毁后，就没有必要把监听的句柄存储在vue-bus里面了，所以，我们还可以完善一下index.vue的代码，完善后的代码如下：

这样，我们就完成了一个中央事件总线插件vue-bus，可以实现vue跨级组件之间的通信，在实际的开发项目中，如果数据和业务逻辑不是特别复杂，没有必要使用Vuex，那么我们就可以通过这种方式，实现我们再实际业务逻辑中的组件间数据传递，而且代码比较简洁直观。

感谢源码时代教学讲师提供此文章！

本文为原创文章，转载请注明出处！

#标签：vue,vue-bus