公共事件總線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給我們提供的最理想的方式。

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

轉載于:https://www.cnblogs.com/singerlee-changealive/p/10519822.html

總結

以上是生活随笔為你收集整理的vue中央事件总线eventBus的简单理解和使用的全部內容，希望文章能夠幫你解決所遇到的問題。

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