您好,登錄后才能下訂單哦!
前言
最近碰到了比較多的關(guān)于vue的eventBus的問(wèn)題,之前定技術(shù)選型的時(shí)候也被問(wèn)到了,vuex和eventBus的使用范圍。所以簡(jiǎn)單的寫(xiě)一下。同時(shí)有一種特殊的實(shí)現(xiàn)方案。
有這么幾種數(shù)據(jù)傳遞方式,vuex、props、eventBus和特殊的eventBus。
vuex
不介紹,數(shù)據(jù)量和復(fù)雜度達(dá)不到不用它你才會(huì)向下看。
props
demo
父子組件傳值,官方api,只寫(xiě)個(gè)demo。
1.父組件
<son :info="info" @update="updateHandler"/> // data info: 'sendToSon' // methods updateHandler (newVal) { this.info = newVal }
2.子組件
// props props: ['info'] // 向上傳值,某個(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)行溝通。
問(wèn)題
所以是否有一種更適用的方案呢?
特殊的eventBus?
demo
我們先來(lái)看個(gè)代碼,線上代碼。 bus皆為導(dǎo)入的bus實(shí)例。
// bus const bus = new Vue({ data () { return { // 定義數(shù)據(jù) val1: '' } }, created () { // 綁定監(jiān)聽(tīng) 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 } }
不同
解決的問(wèn)題
通信組件需同時(shí)存在?數(shù)據(jù)在bus上存儲(chǔ),所以沒(méi)有要求。
多次綁定?綁定監(jiān)聽(tīng)都在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ù)據(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 改變。
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)的理解和使用也沒(méi)有那么難不是嗎。
總結(jié)
以上所述是小編給大家介紹的vue數(shù)據(jù)傳遞--我有特殊的實(shí)現(xiàn)技巧,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。