前言

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

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

vuex

不介紹，數(shù)據(jù)量和復(fù)雜度達(dá)不到不用它你才會向下看。

props

demo

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

1.父組件

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

2.子組件

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

父向子傳值-->props 子向父傳值-->子組件綁定事件回調(diào)定義在父組件，子組件觸發(fā)此事件。 因不推薦子組件內(nèi)直接修改父組件傳入的props，需使用自定義事件。

限制

父子組件。

eventBus

demo

bus皆為導(dǎo)入的bus實(shí)例

// bus
const bus = new Vue()
// 數(shù)據(jù)接收組件
// 當(dāng)前組件接收值則
bus.$on('event1', (val)=>{})
// 數(shù)據(jù)發(fā)出組件
// 當(dāng)前組件發(fā)出值則
bus.$emit('event1', val)

可以看出本質(zhì)是一個vue實(shí)例充當(dāng)事件綁定的媒介。 在所有實(shí)例中使用其進(jìn)行數(shù)據(jù)的通信。

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

問題

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

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

特殊的eventBus？

demo

我們先來看個代碼，線上代碼。 bus皆為導(dǎo)入的bus實(shí)例。

// bus
const bus = new Vue({
 data () {
  return {
   // 定義數(shù)據(jù)
   val1: ''
  }
 },
 created () {
  // 綁定監(jiān)聽
  this.$on('updateData1', (val)=>{
   this.val1 = val
  })
 }
})
// 數(shù)據(jù)發(fā)出組件
import bus from 'xx/bus'
// 觸發(fā)在bus中已經(jīng)綁定好的事件
bus.$emit('update1', '123')
// 數(shù)據(jù)接收組件

{{val1}}
// 使用computed接收數(shù)據(jù)
computed () {
 val1 () {
  // 依賴并返回bus中的val1
  return bus.val1
 }
}

不同

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

解決的問題

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

多次綁定？綁定監(jiān)聽都在bus上，不會重復(fù)綁定。

數(shù)據(jù)只在$emit后可用？使用計算屬性直接讀取存在bus上的值，不需要再次觸發(fā)事件。

探討

為什么使用計算屬性

其實(shí)應(yīng)該是為什么不能直接添加到data上，如 data1: bus.data1？我們可以再看一段代碼，線上代碼。 將bus修改為

data () {
 return {
  // 多一層結(jié)構(gòu)
  val: {
   result: 0
  }
 }
},
created () {
 this.$on('update1', val => {
  console.log('觸發(fā)1', i1++)
  this.val.result = val
 })
}

數(shù)據(jù)接收組件改為

// template
data中獲取直接修改值：{{dataResult}}
data中獲取直接修改值的父層：{{dataVal}}
computed中依賴直接修改值：{{computedResult}}
// js
data () {
  return {
   // 獲取直接修改值
   dataResult: bus.val.result,
   // 獲取直接修改值的父層
   dataVal: bus.val
  }
 },
 computed: {
  computedResult () {
   // 依賴直接修改值
   return bus.val.result
  }
 }

可以看到，data中獲取直接修改值值的數(shù)據(jù)是無法動態(tài)響應(yīng)的。

為什么要用事件

其實(shí)不用 $emit觸發(fā)，使用 bus.val = 1直接賦值也是可以的，那么為什么不這么做呢？

簡化版的vuex

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

組件不允許直接修改屬于 store 實(shí)例的 state，而應(yīng)執(zhí)行 action 來分發(fā) (dispatch) 事件通知 store 去改變，我們最終達(dá)成了 Flux 架構(gòu)。這樣約定的好處是，我們能夠記錄所有 store 中發(fā)生的 state 改變。

store對應(yīng) bus實(shí)例， state對應(yīng) data， action對應(yīng) 事件， dispatch對應(yīng) $emit。 同時vuex中組件獲取數(shù)據(jù)的方式正是通過計算屬性，那么其實(shí)vuex和Flux架構(gòu)的理解和使用也沒有那么難不是嗎。

總結(jié)

以上所述是小編給大家介紹的vue數(shù)據(jù)傳遞--我有特殊的實(shí)現(xiàn)技巧，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論