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