這次帶給大家巧用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實例充當事件綁定的媒介。在所有實例中使用其進行資料的通訊。
雙(多)方使用同名事件進行溝通。
問題
$emit時，必須已經$on，否則將無法監聽到事件，也就是說對組件是有一定的同時存在的要求的。 (註：路由切換時，新路由元件先 created，舊路由元件再destoryed，部分情況可以分別寫入這兩個生命週期，請見此問題)。
$on在元件銷毀後不會自動解除綁定，若同一元件多次產生則會多次綁定事件，則會一次$emit，多次回應，需額外處理。
資料非「長效」數據，無法保存，只在 $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
}
}不同
#正統的eventBus只是用來綁定和觸發事件，並不關心數據，不與資料發生交集。而這個方案多一步將資料直接加入在bus實例上。且事件監聽與資料新增需事先定義好。
資料接收方不再使用$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資料傳遞的詳細內容。更多資訊請關注PHP中文網其他相關文章！
