公共事件總線eventBus的實質就是創建一個vue實例，通過一個空的vue實例作為橋梁實現vue組件間的通信。它是實現非父子組件通信的一種解決方案。

用法如下：

第一步：項目中創建一個js文件（我通常給它取個名字為bus.js），引入vue，創建一個vue實例，導出這個實例，代碼如下（一共就兩行）：

 

1 import Vue from 'Vue'
2 export default new Vue

 

第二步：在兩個需要通信的兩個組件中分別引入這個bus.js

 

   1 import Bus from '這里是你引入bus.js的路徑' // Bus可自由更換喜歡的名字 

 

第三步：傳遞數據的組件里通過vue實例方法$emit發送事件名稱和需要傳遞的數據。(發送數據組件)

 

  1 Bus.$emit('click',data) // 這個click是一個自定義的事件名稱，data就是你要傳遞的數據。 

 

第四步：被傳遞數據的組件內通過vue實例方法$on監聽到事件和接受到數據。（接收數據的組件）這里通常掛載監聽在vue生命周期created和mounted當中的一個，具體使用場景需要具體的分析，這里不說這個。

 

1 Bus.$on('click',target => {
2 　　console.log(target)　　//　注意：發送和監聽的事件名稱必須一致，target就是獲取的數據，可以不寫target。只要你喜歡叫什么都可以（當然了，這一定要符合形參變量的命名規范）
3 })

通過以上的四步其實就已經實現了最簡單的eventbus的實際應用了。

 

但是到這兒后，一定要注意一個最容易忽視，又必然不能忘記的東西，那就是 清除事件總線eventBus.

不手動清除，它是一直會存在的，這樣的話，有個問題就是反復進入到接受數據的組件內操作獲取數據，原本只執行一次的獲取的操作將會有多次操作。如上我所舉的例子，只是打印多次傳過來的數據。但你想想，實際開發中是不會這么簡單的打印這個數據到控制台，本來只會觸發並只執行一次，現在變成了多次，這個問題就非常嚴重了，你們各種腦補具體的項目開發場景吧。

 

第五步：在vue生命周期beforeDestroy或者destroyed中用vue實例的$off方法清除eventBus

1 beforeDestroy(){
2     bus.$off('click')
3  }

 

總結一下，這里只是介紹如何使用eventBus來解決非父子組件通信，但是當項目較大較復雜時，並不適合。到那時，vuex才是vue給我們提供的最理想的方式。

注意：以上存粹是個人的理解，有不同觀點或者其他建議的歡迎交流學習！