vue之間通信也挺簡(jiǎn)單的澜倦,用到的場(chǎng)景挺多的聚蝶,簡(jiǎn)單說(shuō)下。
1 父組件向子組件傳遞數(shù)據(jù)
子組件在父組件的并作為標(biāo)簽引入藻治,通過(guò)設(shè)置標(biāo)簽的屬性傳遞數(shù)據(jù)碘勉,在子組件用props接受,桩卵,例如下面這樣验靡,父組件parent.vue引入子組件child.vue,將父組件的數(shù)據(jù)name通過(guò)設(shè)置標(biāo)簽child的name屬性傳遞給子組件雏节,子組件通過(guò)props傳遞接受胜嗓,接受后,在子組件內(nèi)this.name就是父組件的name數(shù)據(jù)矾屯。
parent.vue:
child.vue:
2 子組件向父組件傳遞數(shù)據(jù)
? ? 子組件通過(guò)$emit方法傳遞數(shù)據(jù)兼蕊,emit第一個(gè)是事件,后面的是傳遞的參數(shù)件蚕,父組件在子組件的標(biāo)簽接受方法并處理
child.vue
parent.vue
3 父組件調(diào)用子組件的方法
子組件需要根據(jù)父組件的方法進(jìn)行處理,通常會(huì)寫一個(gè)方法产禾。在父組件數(shù)據(jù)變動(dòng)的情況下排作,就需要調(diào)用子組件的方法。我們可以在父組件內(nèi)將子組件通過(guò)喲ref注冊(cè)亚情,然后用$refs調(diào)用子組件的方法
4 兄弟組件傳遞數(shù)據(jù)
可以通過(guò)子組件a用$emit觸發(fā)妄痪,在子組件b的mounted階段用$on接收處理。還可以通過(guò)組件a通過(guò)$emit觸發(fā)楞件,父組件接受衫生,然后調(diào)用子組件b的方法去修改組件B里的值裳瘪。兄弟組件我基本上沒(méi)用到,就不上圖了罪针。