web前端開(kāi)發(fā)中父鏈和子鏈方式實(shí)現(xiàn)通信

父鏈和子鏈?zhǔn)且环N父子間組件通信的新方式。

概念

父鏈：

在子組件中，使用this.$parent可以直接訪(fǎng)問(wèn)該組件的父實(shí)例或組件，【類(lèi)似于原生或者jquery中獲取父節(jié)點(diǎn)的方式，但是并沒(méi)有操作dom】

子鏈：

在父組件中，使用this.$children訪(fǎng)問(wèn)它所有的子組件，當(dāng)子組件較多時(shí)可以通過(guò)子組件索引名稱(chēng)來(lái)實(shí)現(xiàn)查找。【類(lèi)似于原生或者jquery中獲取子節(jié)點(diǎn)的方式】

說(shuō)明

1. this.$parent與this.$children可以無(wú)限的向上或向下訪(fǎng)問(wèn)，直到根實(shí)例或最內(nèi)層組件。

2. 然后由于子組件可以有多個(gè)，this.$children獲取子組件時(shí)，獲取的是一個(gè)數(shù)組，要給其下標(biāo)才能獲取到具體的某一個(gè)子組件。

3. 這時(shí)操作起來(lái)不是很方便，此時(shí)我們就可以使用：子組件索引的方式實(shí)現(xiàn)獲取具體子組件

父鏈實(shí)例

子鏈實(shí)例

子組件索引實(shí)例

給子組件定義索引時(shí)，需要在子組件調(diào)用標(biāo)簽上使用ref屬性定義，如：

然后在父組件中獲取時(shí)，通過(guò)this.$refs.refName的方式獲取具體的子組件，然后.$refs只在組件渲染完成后才會(huì)充填。

this.$refs.sub2.submes = "來(lái)自父組件的信息--sub2";

由于$refs是非響應(yīng)式的，所以他僅僅作為直接訪(fǎng)問(wèn)子組件的一個(gè)應(yīng)急方案。應(yīng)當(dāng)避免在計(jì)算屬性或者模板中使用$refs.

父鏈和子鏈總結(jié)

1. 父鏈與子鏈的父子組件通信方式非常相似與傳統(tǒng)的dom節(jié)點(diǎn)通信方式，當(dāng)然他仍然沒(méi)有去操作dom節(jié)點(diǎn)，他操作的仍然是數(shù)據(jù)。

2. 不過(guò)這種方式會(huì)讓父子組件間出現(xiàn) 緊耦合 很難看清他們的狀態(tài)，因?yàn)樗S時(shí)可能會(huì)被任意組件修改，所以這種方式并不推薦！

3. 父子組件通信最好還是使用props與【自定義事件+$emit】的方式來(lái)通信。

4. 跨級(jí)組件間的通信還是使用中央事件總線(xiàn)的方式實(shí)現(xiàn)通信?！綽us.$emit(),bus.$on()】