公共事件匯流排eventBus的實質就是創建一個vue實例，通過一個空的vue實例作為橋梁實現vue組件間的通信。它是實現非父子組件通信的一種解決方案。 用法如下： 第一步：項目中創建一個js文件（我通常給它取個名字為bus.js），引入vue，創建一個vue實例，導出這個實例，代碼如下（一共就兩行） ...
公共事件匯流排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給我們提供的最理想的方式。
註意：以上存粹是個人的理解，有不同觀點或者其他建議的歡迎交流學習！
