最近小組有個關于vue源碼分析的分享會，提前準備一下…

前言:
我們都知道Vue中父組件可以通過 props 向下傳數據給子組件；子組件可以通過向$emit觸發一個事件，在父組件中執行回調函數，從而實現子組件與父組件的通信，如下圖：

從圖可以看到，這種機制兄弟組件之間是通信不了的，假如不借助vuex等庫，如何實現兄弟組件之間的通信？接下來說說事件總線。

事件總線的實現

舉個例子，如圖，建個vue的demo，包含父組件App、子組件Child1及Child2。
（1）main.js
如圖，Vue的原型上定義一個$EventBus，這個$EventBus是一個vue的實例。

（2）App.vue

（3）Child1.vue

（2）Child2.vue

打開瀏覽器，可以看到如圖結果：

以上例子比較簡單，就不解釋了，可以看到例子就沒有借助vuex，便實現了兄弟組件之間的通信，這是因為我們在Vue原型上定義了一個全局的$EventsBus，各種組件都在共用這個全局的對象，理解其中的原理，首先要對自定義事件做一個分析，接下看看Vue自定義事件實現的相關源碼。

Vue自定義事件實現原理分析

在vue實例化的時候，會進行很多初始化操作，其中包括eventsMixin這個方法，如圖：

這個方法主要包含四個方法，如圖：

（1）Vue.prototype.$on

可以看到，這個函數首先判斷傳進來的event是不是一個數組，如果是數組，循環調用$on把事件及回調函數按照事件的名稱event把回調函數 fn 存儲起來，如代碼中的vm._events[event].push(fn)。

（2）Vue.prototype.$emit

當執行 vm.$emit(event)的時候，根據事件名event找到所有的回調函數，如代碼中的var cbs = vm._events[event]，然后遍歷執行所有的回調函數。
需要注意的是，這里用到了一個toArray(arguments, 1)的方法，是因為第二個開始才是傳遞的參數，所以需要截取出來，如圖：

題外：有興趣可以去了解一下Array.prototype.slice.call()這個方法

（3）vm.$off、vm. $once

這兩個方法比較簡單，就不截圖了，有興趣可以自行去看看。大致是執行vm.$off(event,fn) 時會移除指定的事件及回調函數 ；當執行 vm.$once(event,fn)時，執行的是 vm.$on，但回調函數執行一次后會通過vm.$off移除事件的回調，這樣就確保了回調函數只執行一次。

總結

所自定義的事件添加和刪除用的就是上邊說的幾個方法。子組件中通過$emit派發事件，父組件中通過$on執行回調，進而實現子組件與父組件的通信。事件總線之所以能實現兄弟組件的通信，是因為$emit及$on都定義到了一個全局的$EventBus上。

總結

以上是生活随笔為你收集整理的[Vue源码分析]自定义事件原理及事件总线的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。