巧用vue資料傳遞

這次帶給大家巧用vue資料傳遞，巧用vue資料傳遞的注意事項有哪些，下面就是實戰案例，一起來看一下。

前言

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

有這麼多種資料傳遞方式，vuex、props、eventBus和特殊的eventBus。

vuex

不介紹，資料量和複雜度達不到不用它你才會往下看。

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子向父傳值-->子元件綁定事件回呼定義在父元件，子元件觸發此事件。因不推薦子元件內直接修改父元件傳入的props，需使用自訂事件。

限制

父子元件。

eventBus

demo

bus皆為導入的bus實例

// bus
const bus = new Vue()
// 数据接收组件
// 当前组件接收值则
bus.$on('event1', (val)=>{})
// 数据发出组件
// 当前组件发出值则
bus.$emit('event1', val)

可以看出本質是vue實例充當事件綁定的媒介。在所有實例中使用其進行資料的通訊。

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

問題

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

2. $on在元件銷毀後不會自動解除綁定，若同一元件多次產生則會多次綁定事件，則會一次$emit，多次回應，需額外處理。

3. 資料非「長效」數據，無法保存，只在 $emit後生效。

所以有沒有更適用的方案呢？

特殊的eventBus？

demo

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

// bus
const 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
 }
}

不同

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

2. 資料接收方不再使用$on來得知資料變化，而是透過計算屬性的特徵被動接收。

解決的問題

#通訊元件需同時存在？資料在bus上存儲，所以沒有要求。

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

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

探討

為什麼要使用運算屬性

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

data () {
 return {
  // 多一层结构
  val: {
   result: 0
  }
 }
},
created () {
 this.$on('update1', val => {
  console.log('触发1', i1++)
  this.val.result = val
 })
}

資料接收元件改為

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

可以看到，data中取得直接修改值值的資料是無法動態回應的。

為什麼要用事件

其實不用$emit觸發，使用bus.val = 1直接賦值也是可以的，那為什麼不這麼做呢？

簡化版的vuex

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

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

store對應 bus實例， state對應 data， action對應 事件， dispatch對應 $emit。同時vuex中元件取得資料的方式正是透過計算屬性，那麼其實vuex和Flux架構的理解和使用也沒有那麼難不是嗎。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Vue.js Flask做出手機App

#如何利用Vue實作圖片輪播

以上是巧用vue資料傳遞的詳細內容。更多資訊請關注PHP中文網其他相關文章！