從$emit 到 父子組件通訊 再到 eventBus

故事仍是得從$emit提及，某一天翻文檔的時候看到$emit的說明

觸發當前實例上的事件？就是自身組件上的事件唄，在父子組件通訊中，父組件經過props傳遞給子組件數據（高階組件能夠用provide和inject），因爲這是單向數據流，爲了保證複用組件的的時候出現數據錯亂。

那麼只能經過在子組件裏面去觸發一個事件，來讓父組件本身更新數據。

那麼問題來了,$emit不是說好的觸發當前實例上的事件嗎？那是怎麼去能觸發父組件數據更新的呢？難道父組件裏也能$on對應的事件？？？

其實不是的，看下面這個示例

 <div id="app1"> <m-area :v="value" @do="pAdd"></m-area> </div> <script src="js/vue.js"></script> <script> Vue.component('mArea', { props: ['v'], template: ` <div> <button @click="add">{{v}}</button> </div> `, methods: { add() { this.$emit('do'); console.log(this.v) } } }); let app1 = new Vue({ el: '#app1', data: { value: 1 }, methods: { pAdd() { this.value++; }, mouseover() { console.log(this.value); } } }); </script> 

其實Button 的add方法是隻觸發了它自身的do事件，可是

 <div id="app1"> <m-area :v="value" @do="pAdd"></m-area> </div> 

mArea標籤就是該組件啊，do事件是隻觸發了自身的事件，可是m-area標籤是暴露在父組件裏的，看看pAdd方法，它是父組件的mthods裏的一個方法。由此恰好觸發自身組件事件的時候，又觸發了父組件裏的一個方法，數據能夠傳參，最終達到更新父組件數據的目的。

接下來講說eventBus

通常都是建立一個bus.js，而後 export default new Vue()

其實背後就是個原理，經過bus.$emit而後涉及到原型鏈查找，至關於直接是針對於根組件App執行的$emit和$on,站在一個上帝視角，最頂層的組件上，就能造成一個事件總線，這樣不一樣的兄弟組件之間就能進行通訊了。

順即可以看看vue-bus這個插件的源碼，其實也是這麼實現的，而後是經過更改get，改了一下調用屬性方法的別名而已，而後掛到vue.prototype上，方便全局調用。

/** * vue-bus v1.1.0 * https://github.com/yangmingshan/vue-bus * @license MIT */ (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global.VueBus = factory()); }(this, (function () { 'use strict'; function VueBus(Vue) { var bus = new Vue(); Object.defineProperties(bus, { on: { get: function get() { return this.$on } }, once: { get: function get() { return this.$once } }, off: { get: function get() { return this.$off } }, emit: { get: function get() { return this.$emit } } }); Vue.bus = bus; Object.defineProperty(Vue.prototype, '$bus', { get: function get() { return bus } }); } if (typeof window !== 'undefined' && window.Vue) { window.Vue.use(VueBus); } return VueBus; })));