一、前言
在上一章的學習中，我們繼續學習了 Vue 中組件的相關知識，了解了在 Vue 中如何使用組件的 data、prop 選項。在之前的學習中有提到過，組件是 Vue 中的一個非常重要的概念，我們通過將頁面拆分成一個個獨立的組件，從而更好地實現代碼復用，使我們的代碼更加簡潔，容易維護。既然在 Vue 中我們會大量的使用到組件，必定會涉及到組件之間的通信，那么本章我們就來學習，如何實現組件間的數據交互。
學習系列目錄地址：https://www.cnblogs.com/danvic712/p/9549100.html
倉儲地址：https://github.com/Lanesra712/VueTrial/blob/master/chapter02-bronze/component/communication.html
二、干貨合集
1、父組件 => 子組件
在上一章的時候，我們有提到過，我們可以使用 prop 選項在組件中定義一些自定義特性，當有值傳遞給 prop 特性時，那個 prop 特性就變成了那個組件實例的一個屬性，此時我們就可以從組件上獲取到接收的值。因此，這里我們就可以在使用子組件時通過 v-bind 指令動態的綁定一個 prop 特性，從而接收到父組件傳遞的值。
可以看到，在下面的示例代碼中，我們在子組件中通過 v-bind 指令綁定了一個 prop 特性 parenttitle，用來接收父組件 data 選項中的 title 屬性，之后通過 watch 監聽屬性監聽綁定的 parenttitle 屬性，從而同步更新子組件 data 選項中的 content 屬性值。
<body> <div id="app"> <h4> 請輸入需要傳遞給子組件的值：<input type="text" v-model="title" /> </h4> <hr /> <child-node v-bind:parenttitle="title"></child-node> </div> </body> <template id="child"> <div> <h4> Vue 實例中的屬性值為：{{content}} </h4> </div> </template> <script> var vm = new Vue({ el: '#app', data: { title: '' }, components: { 'childNode': { template: '#child', props: ['parenttitle'], data() { return { content: this.parenttitle } }, watch: { parenttitle() { this.content = this.parenttitle } }, } } }) </script>
2、子組件 => 父組件
在 Vue 中存在着一個單向的下行綁定，父級組件的數據變更可以影響到子集組件，反過來則不行。在實際開發中可能會遇到當子組件的數據更新后，需要同步更新父組件的情況，那么這時我們應該怎么做呢？
既然沒辦法直接通過修改 prop 選項中的屬性進行更新父組件，不如讓我們換一個思路思考。我們想要實現的效果，無非是當子組件數據變更時能夠同步引起父組件的變更，那么，我們是不是可以在子組件數據發生變化后，觸發一個事件方法，告訴父組件我數據更新了，父組件只需要監聽這個事件，當捕獲到這個事件運行后，再對父組件的數據進行同步變更不就可以了，整個的示意流程如下。
那么，如何才能實現事件監聽呢？
嗯，Vue 已經幫我們實現好了解決方案。我們可以使用 v-on 事件監聽器監聽事件，通過 $emit 去觸發當前實例上的事件。當然，這里的事件可以是 Javascript 中的原生 DOM 事件，也可以是我們自定義的事件。
例如，在下面的代碼中，當我點擊傳遞數據按鈕后，觸發了子組件的 func 方法，在 func 方法中觸發了子組件實例上的 show 事件，並把 input 框中的值作為參數進行傳遞。這時，我們在使用到子組件的地方就可以通過 v-on(@) 指令監聽這個 show 事件，從而獲取到傳遞的參數，並觸發父組件的監聽事件。
<body> <div id="app"> <h4> 子組件中的屬性值為：{{msg}} </h4> <hr /> <child-node @show="showMsg"></child-node> </div> </body> <template id="child"> <div> <h4> 請輸入需要傳遞給父組件的值：<input v-model="childMsg" type="text" /> <button @click="func">傳遞數據</button> </h4> </div> </template> <script> var vm = new Vue({ el: '#app', data: { title: '', msg: '', }, methods: { showMsg(data) { this.msg = data } }, components: { 'childNode': { template: '#child', data() { return { childMsg: '' } } methods: { func() { this.$emit('show', this.childMsg) } }, } } }) </script>
三、總結
這一章主要介紹了組件之間進行數據通信的兩種最常用的方式，對於子組件獲取父組件數據，一般是采用組件的 prop 選項向子組件傳遞數據；而父組件獲取子組件數據，則是采用事件監聽的方式。在實際使用中，組件的通信方式還有 .sync、$attrs、$listeners、slot-scope 等等，這里就先不介紹了，嗯，其實就是我還不會，哈哈，先學習掌握這兩種最常見的方式，其它的方式就先放到后面再學習吧。
四、參考
1、Vue的事件解讀