您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“Vue組件之間的通信方式是什么”的有關(guān)知識(shí),在實(shí)際案例的操作過(guò)程中,不少人都會(huì)遇到這樣的困境,接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
開始之前,我們把組件間通信這個(gè)詞進(jìn)行拆分
組件
通信
都知道組件是vue最強(qiáng)大的功能之一,vue中每一個(gè).vue我們都可以視之為一個(gè)組件通信指的是發(fā)送者通過(guò)某種媒體以某種格式來(lái)傳遞信息到收信者以達(dá)到某個(gè)目的。廣義上,任何信息的交通都是通信組件間通信即指組件(.vue)通過(guò)某種方式來(lái)傳遞信息以達(dá)到某個(gè)目的舉個(gè)栗子我們?cè)谑褂肬I框架中的table組件,可能會(huì)往table組件中傳入某些數(shù)據(jù),這個(gè)本質(zhì)就形成了組件之間的通信
在古代,人們通過(guò)驛站、飛鴿傳書、烽火報(bào)警、符號(hào)、語(yǔ)言、眼神、觸碰等方式進(jìn)行信息傳遞,到了今天,隨著科技水平的飛速發(fā)展,通信基本完全利用有線或無(wú)線電完成,相繼出現(xiàn)了有線電話、固定電話、無(wú)線電話、手機(jī)、互聯(lián)網(wǎng)甚至視頻電話等各種通信方式從上面這段話,我們可以看到通信的本質(zhì)是信息同步,共享回到vue中,每個(gè)組件之間的都有獨(dú)自的作用域,組件間的數(shù)據(jù)是無(wú)法共享的但實(shí)際開發(fā)工作中我們常常需要讓組件之間共享數(shù)據(jù),這也是組件通信的目的要讓它們互相之間能進(jìn)行通訊,這樣才能構(gòu)成一個(gè)有機(jī)的完整系統(tǒng)
組件間通信的分類可以分成以下
父子組件之間的通信
兄弟組件之間的通信
祖孫與后代組件之間的通信
非關(guān)系組件間之間的通信
關(guān)系圖:
整理vue中8種常規(guī)的通信方案
通過(guò) props 傳遞
通過(guò) $emit 觸發(fā)自定義事件
使用 ref
EventBus
parent或parent 或parent或root
attrs 與 listeners
Provide 與 Inject
Vuex
適用場(chǎng)景:父組件傳遞數(shù)據(jù)給子組件
子組件設(shè)置props屬性,定義接收父組件傳遞過(guò)來(lái)的參數(shù)
父組件在使用子組件標(biāo)簽中通過(guò)字面量來(lái)傳遞值
Children.vue
props:{ // 字符串形式 name:String // 接收的類型參數(shù) // 對(duì)象形式 age:{ type:Number, // 接收的類型為數(shù)值 defaule:18, // 默認(rèn)值為18 require:true // age屬性必須傳遞 } }
Father.vue組件
<Children name="jack" age=18 />
適用場(chǎng)景:子組件傳遞數(shù)據(jù)給父組件
子組件通過(guò)$emit觸發(fā)
自定義事件,$emit
第二個(gè)參數(shù)為傳遞的數(shù)值
父組件綁定監(jiān)聽器獲取到子組件傳遞過(guò)來(lái)的參數(shù)
Chilfen.vue
this.$emit('add', good)
Father.vue
<Children @add="cartAdd($event)" />
父組件在使用子組件的時(shí)候設(shè)置ref
父組件通過(guò)設(shè)置子組件ref來(lái)獲取數(shù)據(jù)
父組件
<Children ref="foo" /> this.$refs.foo // 獲取子組件實(shí)例,通過(guò)子組件實(shí)例我們就能拿到對(duì)應(yīng)的數(shù)據(jù)
使用場(chǎng)景:兄弟組件傳值
創(chuàng)建一個(gè)中央事件總線EventBus
兄弟組件通過(guò)$emit
觸發(fā)自定義事件,$emit
第二個(gè)參數(shù)為傳遞的數(shù)值
另一個(gè)兄弟組件通過(guò)$on
監(jiān)聽自定義事件
Bus.js
// 創(chuàng)建一個(gè)中央時(shí)間總線類 class Bus { constructor() { this.callbacks = {}; // 存放事件的名字 } $on(name, fn) { this.callbacks[name] = this.callbacks[name] || []; this.callbacks[name].push(fn); } $emit(name, args) { if (this.callbacks[name]) { this.callbacks[name].forEach((cb) => cb(args)); } } } // main.js Vue.prototype.$bus = new Bus() // 將$bus掛載到vue實(shí)例的原型上 // 另一種方式 Vue.prototype.$bus = new Vue() // Vue已經(jīng)實(shí)現(xiàn)了Bus的功能
Children1.vue
this.$bus.$emit('foo')
Children2.vue
this.$bus.$on('foo', this.handle)
通過(guò)共同祖輩$parent
或者$root
搭建通信橋連
兄弟組件
this.$parent.on('add',this.add)
另一個(gè)兄弟組件
this.$parent.emit('add')
適用場(chǎng)景:祖先傳遞數(shù)據(jù)給子孫
設(shè)置批量向下傳屬性$attrs
和 $listeners
包含了父級(jí)作用域中不作為 prop
被識(shí)別 (且獲取) 的特性綁定 ( class 和 style 除外)。
可以通過(guò) v-bind="$attrs"
傳?內(nèi)部組件
// child:并未在props中聲明foo <p>{{$attrs.foo}}</p> // parent <HelloWorld foo="foo"/>
// 給Grandson隔代傳值,communication/index.vue <Child2 msg="lalala" @some-event="onSomeEvent"></Child2> // Child2做展開 <Grandson v-bind="$attrs" v-on="$listeners"></Grandson> // Grandson使? <div @click="$emit('some-event', 'msg from grandson')"> {{msg}} </div>
在祖先組件定義provide
屬性,返回傳遞的值
在后代組件通過(guò)inject
接收組件傳遞過(guò)來(lái)的值
祖先組件
provide(){ return { foo:'foo' } }
后代組件
inject:['foo'] // 獲取到祖先組件傳遞過(guò)來(lái)的值
vuex
適用場(chǎng)景: 復(fù)雜關(guān)系的組件數(shù)據(jù)傳遞
Vuex
作用相當(dāng)于一個(gè)用來(lái)存儲(chǔ)共享變量的容器
state
用來(lái)存放共享變量的地方
getter
,可以增加一個(gè)getter
派生狀態(tài),(相當(dāng)于store
中的計(jì)算屬性),用來(lái)獲得共享變量的值
mutations
用來(lái)存放修改state
的方法。
actions
也是用來(lái)存放修改state的方法,不過(guò)action
是在mutations
的基礎(chǔ)上進(jìn)行。常用來(lái)做一些異步操作
父子關(guān)系的組件數(shù)據(jù)傳遞選擇 props
與 $emit
進(jìn)行傳遞,也可選擇ref
兄弟關(guān)系的組件數(shù)據(jù)傳遞可選擇$bus
,其次可以選擇$parent
進(jìn)行傳遞
祖先與后代組件數(shù)據(jù)傳遞可選擇attrs
與listeners
或者 Provide
與 Inject
復(fù)雜關(guān)系的組件數(shù)據(jù)傳遞可以通過(guò)vuex
存放共享的變量
“Vue組件之間的通信方式是什么”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(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)容。