vue中央事件總線eventBus的簡單理解和使用

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

注意：以上存粹是我的的理解，有不一樣觀點或者其餘建議的歡迎交流學習！