vue中的eventBus

在vue2中，父子组件传递数据，父组件可以直接传递数据进子组件，而子组件通过调用父组件传递进来的方法，将自己的数据传递回去。

那兄弟组件之间，或者是兄弟组件的子组件之间如何传递呢？

当然vuex是一种解决方案，那如果仅仅使用vue怎么办？一层层传递么？

这里简单说下vue2里面的eventBus。

一个完整的eventBus主要分为三个部分：eventBus组件、注册事件（$on）、发送事件（$emit）

 

eventBus组件

import Vue from 'Vue';
export default new Vue;

创建一个空的vue组件用来传递数据

 

注册事件

import EventBus from './eventBus';
EventBus.$on('eventname',(value) => {
    //value do someth
});

 

发送事件

import EventBus from './eventBus';
EventBus.$emit('eventname', value);

 

从代码上可以清晰看到，我们只需要在使用的地方，引入eventBus组件，然后注册好$on事件即可。

发送事件$emit触发后，EventBus会自行找到注册过的同名的$on事件，接下来就是如同jquery点击事件一般的函数触发了~

PS：

EventBus可以嵌套哦~