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