轉(zhuǎn)自：https://www.cnblogs.com/goloving/p/8660407.html

當(dāng)在一個(gè)組件中，使用了其他自定義組件時(shí)，就會(huì)利用子組件的屬性和事件來(lái)和父組件進(jìn)行數(shù)據(jù)交流。

父子組件之間的通信就是 props down,? ?events up，父組件通過(guò) 屬性props向下傳遞數(shù)據(jù)給子組件，子組件通過(guò)事件 events 給父組件發(fā)送消息。

子組件需要某個(gè)數(shù)據(jù)時(shí)，就在內(nèi)部定義一個(gè)prop屬性，父組件就像給HTML元素指定特定值一樣，把自己的data屬性傳遞給子組件的這個(gè)屬性。

而子組件內(nèi)部發(fā)生什么事情的時(shí)候，就通過(guò)自定義事件來(lái)把這個(gè)事情涉及到的數(shù)據(jù)暴露出來(lái)，供父組件處理。

<my-component v-bind:foo="baz" v-on:event="doThis(arg1,...arg2)"></my-component>　　

以上代碼中，foo是 <my-component> 組件內(nèi)部定義的prop屬性，baz 是父組件的一個(gè)data屬性，event是子組件定義的一個(gè)事件，doThis是父組件的一個(gè)方法。

　　　　父組件把baz數(shù)據(jù)通過(guò)prop傳遞給子組件的foo；

　　　　子組件內(nèi)部得到foo的值，就可以進(jìn)行相應(yīng)的操作；

　　　　當(dāng)子組件內(nèi)部發(fā)生了一些變化，希望父組件能知道時(shí)，就利用代碼觸發(fā)event-a事件，把一些數(shù)據(jù)發(fā)送出去；

　　　　父組件把這個(gè)事件處理器綁定為doThis方法，子組件發(fā)送的數(shù)據(jù)，就作為doThis方法的參數(shù)被傳進(jìn)來(lái)；

　　　　然后父組件就可以根據(jù)這些數(shù)據(jù)，進(jìn)行相應(yīng)的操作。

轉(zhuǎn)載于:https://www.cnblogs.com/150536FBB/p/11290472.html

總結(jié)

以上是生活随笔為你收集整理的vue中父子组件通信的坑的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。