組件是 vue.js最強(qiáng)大的功能之一，但是在實(shí)際應(yīng)用中各個(gè)組件實(shí)例的作用域是相互獨(dú)立的，這就意味著不同組件之間的數(shù)據(jù)無法相互引用。這篇文章主要來介紹vue中父子組件之間怎么傳遞數(shù)據(jù)，進(jìn)行通信。

1.通過prop實(shí)現(xiàn)通信（父組件向子組件）

子組件的props選項(xiàng)能夠接收來自父組件數(shù)據(jù)。由于props是單向綁定的，即只能父組件向子組件傳遞，不能反向。傳遞的方式可以分為兩種：

（1）靜態(tài)傳遞

子組件通過props選項(xiàng)來聲明一個(gè)自定義的屬性，然后父組件就可以在嵌套標(biāo)簽的時(shí)候，通過這個(gè)屬性往子組件傳遞數(shù)據(jù)了。

（2）動(dòng)態(tài)傳遞

我們已經(jīng)知道了可以像上面那樣給 props 傳入一個(gè)靜態(tài)的值，但是我們更多的情況需要?jiǎng)討B(tài)的數(shù)據(jù)。這時(shí)候就可以用 v-bind 來實(shí)現(xiàn)。通過v-bind綁定props的自定義的屬性，傳遞去過的就不是靜態(tài)的字符串了，它可以是一個(gè)表達(dá)式、布爾值、對(duì)象等等任何類型的值。

2.通過$emit 實(shí)現(xiàn)通信（子組件向父組件）

通過$emit 實(shí)現(xiàn)子組件向父組件通信。

vm.$emit( event, arg )

$emit 綁定一個(gè)自定義事件event，當(dāng)這個(gè)這個(gè)語(yǔ)句被執(zhí)行到的時(shí)候，就會(huì)將參數(shù)arg傳遞給父組件，父組件通過@event監(jiān)聽并接收參數(shù)。