真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

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


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

垣曲網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),垣曲網(wǎng)站設(shè)計制作,有大型網(wǎng)站制作公司豐富經(jīng)驗。已為垣曲超過千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)公司要多少錢,請找那個售后服務(wù)好的垣曲做網(wǎng)站的公司定做!

概念

父鏈:

在子組件中,使用this.$parent可以直接訪問該組件的父實例或組件,【類似于原生或者jquery中獲取父節(jié)點的方式,但是并沒有操作dom】

子鏈:

在父組件中,使用this.$children訪問它所有的子組件,當(dāng)子組件較多時可以通過子組件索引名稱來實現(xiàn)查找?!绢愃朴谠蛘遤query中獲取子節(jié)點的方式】

說明

1. this.$parent與this.$children可以無限的向上或向下訪問,直到根實例或最內(nèi)層組件。

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

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

父鏈實例

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

子鏈實例

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

子組件索引實例

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

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

然后在父組件中獲取時,通過this.$refs.refName的方式獲取具體的子組件,然后.$refs只在組件渲染完成后才會充填。

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

this.$refs.sub2.submes = "來自父組件的信息--sub2";

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

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

父鏈和子鏈總結(jié)

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

2. 不過這種方式會讓父子組件間出現(xiàn) 緊耦合 很難看清他們的狀態(tài),因為他隨時可能會被任意組件修改,所以這種方式并不推薦!

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

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


當(dāng)前文章:web前端開發(fā)中父鏈和子鏈方式實現(xiàn)通信
URL標(biāo)題:http://weahome.cn/article/piceip.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部