Vue組件通信
Vue組件關(guān)系可分為三大類: 父子組件 兄弟組件 跨級(jí)組件, 相應(yīng)的組件之間的通信也分類三大類: 父子組件通信 兄弟組件通信 跨級(jí)組件通信
自定義事件
在子組件內(nèi)通過(guò)$emit觸發(fā)自定義事件, 在父組件內(nèi)通過(guò)$on(or v-on @)來(lái)監(jiān)聽(tīng)自定義事件來(lái)處理子組件向父組件傳遞數(shù)據(jù), 同時(shí)v-on(@)可以通過(guò).native修飾符監(jiān)聽(tīng)原生DOM事件
使用v-model
v-model主要用在自定義組件之間的通信, 自定義組件內(nèi)部通過(guò)$emit觸發(fā)一個(gè)特定的input事件, 在父組件外部使用該自定義組件時(shí)通過(guò)v-model綁定到一個(gè)data上(即v-model是@input的語(yǔ)法糖);
v-model可用來(lái)創(chuàng)建自定義表單輸入組件, 進(jìn)行數(shù)據(jù)雙向綁定, 實(shí)現(xiàn)方法為: 自定義組件的跟元素為input元素, 綁定其value到組件自身props, 監(jiān)聽(tīng)input元素input change等事件, 其value改變時(shí)$emit一個(gè)input事件, 父組件使用該自定義組件時(shí)v-model綁定到一個(gè)data上, 從而實(shí)現(xiàn)數(shù)據(jù)雙向綁定
非父子組件通信($dispatch $broadcast)
$dispatch和$broadcast是Vue 1.X提供的方法, 在Vue 2.X中已被廢棄
$dispatch: 用于向父級(jí)(一級(jí)或多級(jí))派發(fā)事件, $broadcast: 用于向下級(jí)(一級(jí)或多級(jí))廣播事件, 其事件的發(fā)送和接受采用就近原則, 第一次接收到事件后, 就會(huì)停止冒泡, 除非返回true.
Vue 2.X中被廢棄原因:
- 基于樹(shù)結(jié)構(gòu)的事件流晦澀難懂;
- 在組件結(jié)構(gòu)擴(kuò)展過(guò)程中事件流變得愈發(fā)脆弱;
- 不能解決兄弟組件通信問(wèn)題.
中央事件總線
這是Vue 2.X中一種比較完善的解決跨組件間通信的解決方法, 采用一個(gè)空的Vue實(shí)例作為中央事件總線(bus), 事件的觸發(fā)和監(jiān)聽(tīng)分別通過(guò)bus實(shí)例的$on和$emit實(shí)現(xiàn), 不過(guò)需要注意app實(shí)例生命周期中處理bus的事件監(jiān)聽(tīng)
父鏈
子組件中可以通過(guò)$parent訪問(wèn)該組件的父實(shí)例, 父組件也可以通過(guò)$children訪問(wèn)其所有的子組件, 可遞歸訪問(wèn), 通過(guò)$parent,$children直接修改父實(shí)例,子組件的數(shù)據(jù)從而實(shí)現(xiàn)組件通信, 該方法不推薦使用, 這會(huì)使得父子組件高度耦合, 不利于組件的擴(kuò)展.
子組件索引
即采用組件ref屬性來(lái)快速遍歷出我們需要的子組件, ref為組件制定了一個(gè)索引名稱, 父組件通過(guò)this.$refs來(lái)訪問(wèn)指定索引的組件實(shí)例
