vue數(shù)據(jù)傳遞--我有特殊的實(shí)現(xiàn)技巧

xiaoxiaozi 發(fā)布于2019-08-26 17:04 / 2553人閱讀

摘要：同時(shí)有一種特殊的實(shí)現(xiàn)方案。組件之間傳值有這么幾種數(shù)據(jù)傳遞方式，和特殊的。在所有實(shí)例中使用其進(jìn)行數(shù)據(jù)的通信。雙多方使用同名事件進(jìn)行溝通。數(shù)據(jù)非長(zhǎng)效數(shù)據(jù)，無(wú)法保存，只在后生效。這樣約定的好處是，我們能夠記錄所有中發(fā)生的改變。

前言

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

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

vuex

我就傳兩個(gè)數(shù)據(jù)，vuex真是太麻煩了。用是不可能用的，理解又理解不了。

props demo

父子組件傳值，官方api，只寫個(gè)demo。

父組件

// 將事件綁定至子組件

// data
info: "sendToSon"
// methods
updateHandler (newVal) {
  this.info = newVal
}

子組件

// props
props: ["info"]
// 觸發(fā)綁定在組件上的事件，向上傳值，在父組件某個(gè)方法中使用
this.$emit("update", "got")

父向子傳值-->props
子向父?jìng)髦?->子組件綁定事件回調(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ì)是一個(gè)vue實(shí)例充當(dāng)事件綁定的媒介。
在所有實(shí)例中使用其進(jìn)行數(shù)據(jù)的通信。

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

問題

$emit時(shí)，必須已經(jīng)$on，否則將無(wú)法監(jiān)聽到事件，也就是說(shuō)對(duì)組件是有一定的同時(shí)存在的要求的。(注：路由切換時(shí)，新路由組件先created，舊路由組件再destoryed，部分情況可以分別寫入這兩個(gè)生命周期，見此問題)。

$on在組件銷毀后不會(huì)自動(dòng)解除綁定，若同一組件多次生成則會(huì)多次綁定事件，則會(huì)一次$emit，多次響應(yīng)，需額外處理。

數(shù)據(jù)非“長(zhǎng)效”數(shù)據(jù)，無(wú)法保存，只在$emit后生效。

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

特殊的eventBus？ demo

我們先來(lái)看個(gè)代碼，線上代碼。
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
  }
}

不同

正統(tǒng)的eventBus只是用來(lái)綁定和觸發(fā)事件，并不關(guān)心數(shù)據(jù)，不與數(shù)據(jù)發(fā)生交集。而這個(gè)方案多一步將數(shù)據(jù)直接添加在bus實(shí)例上。且事件監(jiān)聽與數(shù)據(jù)添加需提前定義好。

數(shù)據(jù)接收方不再使用$on來(lái)得知數(shù)據(jù)變化，而是通過(guò)計(jì)算屬性的特征被動(dòng)接收。

解決的問題

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

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

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

探討 為什么使用計(jì)算屬性

其實(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í)值的數(shù)據(jù)是無(wú)法動(dòng)態(tài)響應(yīng)的。

為什么要用事件

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

簡(jiǎn)化版的vuex

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

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

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