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能够嵌套哦~