前言

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

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

vuex

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

props

demo

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

1.父組件

<son :info="info" @update="updateHandler"/>// datainfo: 'sendToSon'// methodsupdateHandler (newVal) { this.info = newVal}

2.子組件

// propsprops: ['info']// 向上傳值，某個方法中使用this.$emit('update', 'got')

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

限制

父子組件。

eventBus

demo

bus皆為導入的bus實例

// busconst bus = new Vue()// 數據接收組件// 當前組件接收值則bus.$on('event1', (val)=>{})// 數據發出組件// 當前組件發出值則bus.$emit('event1', val)

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

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

問題

$emit時，必須已經 $on，否則將無法監聽到事件，也就是說對組件是有一定的同時存在的要求的。(注：路由切換時，新路由組件先 created，舊路由組件再destoryed，部分情況可以分別寫入這兩個生命周期，見此問題)。 $on在組件銷毀后不會自動解除綁定，若同一組件多次生成則會多次綁定事件，則會一次 $emit，多次響應，需額外處理。 數據非“長效”數據，無法保存，只在 $emit后生效。

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

特殊的eventBus？

demo

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

// busconst bus = new Vue({ data () {  return {   // 定義數據   val1: ''  } }, created () {  // 綁定監聽  this.$on('updateData1', (val)=>{   this.val1 = val  }) }})// 數據發出組件import bus from 'xx/bus'// 觸發在bus中已經綁定好的事件bus.$emit('update1', '123')// 數據接收組件{{val1}}// 使用computed接收數據computed () { val1 () {  // 依賴并返回bus中的val1  return bus.val1 }}

不同

正統的eventBus只是用來綁定和觸發事件，并不關心數據，不與數據發生交集。而這個方案多一步將數據直接添加在bus實例上。且事件監聽與數據添加需提前定義好。 數據接收方不再使用$on來得知數據變化，而是通過計算屬性的特征被動接收。