前言

最近碰到了比較多的關於vue的eventBus的問題，之前定技術選型的時候也被問到了，vuex和eventBus的使用範圍。所以簡單的寫一下。同時有一種特殊的實現方案。

有這麼幾種數據傳遞方式，vuex、props、eventBus和特殊的eventBus。

vuex

不介紹，數據量和複雜度達不到不用它你才會向下看。

props

demo

父子組件傳值，官方api，只寫個demo。

1.父組件

2.子組件

父向子傳值-->props 子向父傳值-->子組件綁定事件回調定義在父組件，子組件觸發此事件。 因不推薦子組件內直接修改父組件傳入的props，需使用自定義事件。

限制

父子組件。

eventBus

demo

bus皆為導入的bus實例

可以看出本質是一個vue實例充當事件綁定的媒介。 在所有實例中使用其進行數據的通信。

雙(多)方使用同名事件進行溝通。

問題

時，必須已經 ，否則將無法監聽到事件，也就是說對組件是有一定的同時存在的要求的。(註：路由切換時，新路由組件先 ，舊路由組件再，部分情況可以分別寫入這兩個生命周期，見此問題)。

在組件銷毀後不會自動解除綁定，若同一組件多次生成則會多次綁定事件，則會一次 ，多次響應，需額外處理。

數據非「長效」數據，無法保存，只在 後生效。

所以是否有一種更適用的方案呢？

特殊的eventBus？

demo

我們先來看個代碼，線上代碼。 bus皆為導入的bus實例。

// 數據發出組件

// 數據接收組件

不同

正統的eventBus只是用來綁定和觸發事件，並不關心數據，不與數據發生交集。而這個方案多一步將數據直接添加在bus實例上。且事件監聽與數據添加需提前定義好。

數據接收方不再使用$on來得知數據變化，而是通過計算屬性的特徵被動接收。

解決的問題

通信組件需同時存在？數據在bus上存儲，所以沒有要求。

多次綁定？綁定監聽都在bus上，不會重複綁定。

數據只在$emit後可用？使用計算屬性直接讀取存在bus上的值，不需要再次觸發事件。

探討

為什麼使用計算屬性

其實應該是為什麼不能直接添加到data上，如 ？我們可以再看一段代碼，線上代碼。 將bus修改為

數據接收組件改為

可以看到，data中獲取直接修改值值的數據是無法動態響應的。

為什麼要用事件

其實不用 觸發，使用 直接賦值也是可以的，那麼為什麼不這麼做呢？

簡化版的vuex

其實這種eventBus就是簡化版的vuex。 vue文檔中有這樣一段話：

組件不允許直接修改屬於 store 實例的 state，而應執行 action 來分發 (dispatch) 事件通知 store 去改變，我們最終達成了Flux架構。這樣約定的好處是，我們能夠記錄所有 store 中發生的 state 改變。

對應 實例， 對應 ， 對應 ， 對應 。 同時vuex中組件獲取數據的方式正是通過計算屬性，那麼其實vuex和Flux架構的理解和使用也沒有那麼難不是嗎。

原文：https://segmentfault.com/a/1190000012808179

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！