VUE eventBus
問題背景：元件傳值；在專案開發中，會發現元件傳值是一個組基本的操作，也是用的最多的。但是很多時候可能涉及到爺爺和孫子，甚至重孫子之間需要的傳值。這個時候eventBus就到了大顯身手的時候了。
eventBus 嗯 ，就叫一個事件公共汽車吧。每個人把需要共享給別人的物品就放在這個車上，誰需要了就可以去拿，這樣子是不是很方便，每個人都可以訪問到，每個人也可以往這個車子上放東西。
下面開始這個過程，一共就四步。

第一步就是先把公交車造出來。先建立eventBus.js 檔案。
/**
* 某某頁面
* @author: leon
* @create: 2018-05-21 10:01
 
*/
import Vue from 'vue';
const bus = new Vue();
export default {
/**
* 註冊全域性事件
* @param eventName 事件名稱
* @param handler 事件處理函式
* @param scope vm物件，一般傳this 建議必須要傳（頁面的this），自動銷燬功能
* @param once 是否單次註冊
*/
on(eventName, handler, scope = null, once = false) {
if (once) {
bus.$once(eventName, handler);
return
 
;
}
bus.$on(eventName, handler);
if (scope) {
let originalDestroy = scope.$destroy;
scope.$destroy = function () {
bus.$off(eventName, handler);
originalDestroy.call(this);
}
}
},

/**
* 觸發事件
* @param eventName 要觸發的事件名稱
* @param data 事件物件
*/
emit(eventName, data = {}) {
bus.$emit(eventName, data);
}
};


第二步就是讓這個公共汽車上路。開車了。在全域性引入
import eventBus from 
 
'./eventBus'
Vue.prototype.$eventBus = eventBus;

第三步就是放東西。傳值這裡通過emit這個方法進行傳遞。一般是放在函式裡呼叫。
getNum(){
this.$eventBus.emit("haha","我是值")
}

第四步就是拿下來咯，一般寫在mounted裡面，這樣可以避免一個多次觸發的問題。當然可以自己寫在函式裡試一試。
mounted() {
this.$eventBus.on(
"haha",
function(data) {
console.log(data);
},
this
);
},