Vue组件通信中eventBus的简单使用

Vue组件通信中eventBus的简单使用

头一次接触eventBus是在一个移动端项目中,是一位前端同事写的,之前都不知道有这个用法,后来就在网上查了一些资料.
大概理解了eventBus的一个功能,可以实现组件之间的数据通信,一般在中大型项目中使用vueX就可以实现数据共享了,但是一些小项目可以使eventBus来实现组件之间的通信.

原理

其主要实现场景是在兄弟组件之间的通信,引入一个新的vue实例,然后分别调用这个实例的时间触发和监听,来实现通信和参数传递.

实例

使用场景如：兄弟组件间的通信，父组件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通信,当然自己感觉创建一个实例在各组件中引用应该会有其他的用处,有知道的其他用处的小伙伴可以留言讨论.