vue中eventBus的使用

eventBus是用于组件间通讯的一种方法，我们都知道在vue中数据流是单向的，那么非父子组件间的传值自然值得我们注意

一种是我们都很熟悉的vuex；它可以通过仓库沟通我们所有组件间的通信；而另外还存在一种叫做eventBus的方法：

使用场景如：兄弟组件间的通信，父组件fatherCom中同时使用到childOne和childTwo两个兄弟组件，点击子组件childTwo需要另一子组件ChildOne响应；

1.定义eventBus，建立eventBus.js文件,挂载到Vue实例上，暴露出去：　　

　　import Vue from 'vue';

　　let bus = new Vue();

　　Vue.prototype.$eventBus = bus;

　　export default bus;

 

2.使用到eventBus的兄弟组件都引入eventBus.js：

 

　　import eventBUs from '../../utils/eventBus.js'

 

3.子组件childone声明发布（声明）事件，通常在mounted或created中声明：

　　　　

　　created() {

　　　　 eventBus.$on('getTarget', target => {

　　　　　　console.log(target);

　　　　 });

　　 }

 

4.子组件childtwo订阅（触发）事件：

 

　　methods: {

　　　　addCart(event) {

　　　　　　eventBus.$emit('getTarget', event.target);

　　　　 }

　　 }

 

 

这就是一个完整的eventBus通信。