App下載

Vue中組件間通信有哪幾種方式

不解風(fēng)情的老妖怪 2021-12-17 10:09:35 瀏覽數(shù) (2757)
反饋

父子組件

props/event

子組件有時(shí)需要與父組件進(jìn)行溝通,溝通的方式就是子組件 $emit 傳遞一個(gè)自定義事件,父組件通過(guò)監(jiān)聽(tīng)這個(gè)事件來(lái)做進(jìn)一步動(dòng)作。而父組件與子組件通信則使用 props來(lái)傳遞一個(gè)綁定在子組件上的屬性,這個(gè)屬性值來(lái)源于父組件。


parent/children

父組件中使用 $children 操作子組件。并在父組件通過(guò) $children 訪問(wèn)到已經(jīng)在在父組件當(dāng)中引入了的子組件, $children 返回的是子組件列表,是一個(gè)數(shù)組。

子組件中子組件可通過(guò) $parent 來(lái)訪問(wèn)父組件里的數(shù)據(jù)和定義的方法,如修改父組件中的$data。

ref

父組件中可為子組件定義一個(gè)ref屬性,然后父組件里通過(guò)$ref[對(duì)象子組件上定義的屬性名來(lái)訪問(wèn)子組件里的數(shù)據(jù)


provide/inject

適用于祖先和后代關(guān)系的組件間的通信,祖先元素通過(guò) provide 提供一個(gè)值,后代元素則通過(guò) inject 獲取到這個(gè)值。這個(gè)值默認(rèn)是非響應(yīng)的,如果是對(duì)象那么則是響應(yīng)式的:


兄弟組件

bus

在Vue . 2.x 中, 推薦使用一個(gè)空的Vue 實(shí)例作為中央事件總線( bus ),也就是一個(gè)中介。

通信的組件必須都引入這個(gè)實(shí)例例。

通過(guò)bus.$emit() 傳遞出一個(gè)自定義事件

在需要進(jìn)行操作的組件里,通過(guò)bus.$on 監(jiān)聽(tīng)這個(gè)自定義事件, 進(jìn)行操作。


Vuex

Vuex 是Vue推出的狀態(tài)管理工具

Vuex 就是把需要共享的變量量全部存儲(chǔ)在一個(gè)對(duì)象里面,然后將這個(gè)對(duì)象放在頂層組件中供其他組件使用。這么說(shuō)吧,將vue想作是一個(gè)js?文件、組件是函數(shù),那么vuex就是一個(gè)全局變量,只是這個(gè)“全局變量”包含了一些特定的規(guī)則而已。

通過(guò)$store 這個(gè)對(duì)象訪問(wèn)數(shù)據(jù)和調(diào)用在Vuex 里定義的公共方法。


跨級(jí)組件

bus vuex provide inject


0 人點(diǎn)贊