今天我們看一下元件通訊。
經過前面幾篇文章，我們已經可以構建出完整的單個元件，並利用路由使其串聯起來訪問了。
但這明顯還是不夠的。乙個頁面不可能就是個單元件，一般是由多個元件合成的。正因為如此，元件之間肯定是有相互關係的，我們就稱這種現象叫元件通訊。
比如父元件發生了某項改變，子元件會跟著相應發生變化；反過來，子元件有了某種改變，父元件有時也會隨之做出調整。那麼這種現象我們稱之為雙向資料流動。
然而，vue的作者敏銳的認識到，雙向資料流帶來便捷的同時，也存在著極大的安全隱患。
父元件將變化傳遞給子元件（父影響子），這是沒問題的，在我們日常生活中也是極為普遍的現象（老子教訓兒子是天經地義的），然而反過來子影響父的話，這就變得不可理喻了（兒子教訓老子？）
子元件修改父元件，增大了元件之間的耦合度。有時開發者根本沒有意識到這種修改，這猶如埋下一顆定時炸彈，隨著日後專案**的膨脹，一旦引爆，問題排查難度也會呈指數級的徒增。
為了斬斷這種安全隱患，vue提倡的是單向資料流動——也就是只能父影響子，而反過來則不成立。
父傳子，我們利用props作為橋梁。下面看乙個例子。
首先我將目錄調整一下：
其中，helloworld.vue元件，我們設定其為父元件；而children目錄下的child.vue，我們設定為其子元件。
helloworld.vue**如下：
我們在父元件定義了乙個mymsg這個變數，然後通過v-bind繫結到了child元件中。這時，child元件就可以通過props來接收這個變數了。
child.vue**如下：
我從父親那邊接收過來的資訊：
}
import vue from 'vue'import router from 'vue-router'import hello from '@/components/hello'import helloworld from '@/components/helloworld' //
我們新定義的元件
vue.use(router)
export
default
newrouter(,
]})
可以看到，子元件順利接收到了父元件傳來的資訊。
那麼，到底子元件能否影響父元件呢？我們將以上**做一下調整。
調整後的helloworld.vue
我從父親那邊接收過來的資訊：
}是否可以子影響父呢？
可以看出，子元件是無法影響父元件的，這樣父元件就成功解耦了。
大家要注意乙個問題——傳遞的資料型別問題。
傳遞的是值型別肯定沒問題，假如是物件或者陣列這樣的引用型別，變數共用同一記憶體，所以父子會出現雙向影響，這個問題一定要注意。
為了杜絕隱患，提高安全性，我們在子元件將prop接收的型別做一下強制檢測，假如傳入的資料型別並不是我需要的，可以丟擲異常。
helloworld.vue
child.vue
我從父親那邊接收過來的資訊：
字串：}
數字：}
那麼對於容易引發錯誤的引用型別，大家應該如何避免呢？
當我們接收過來這個物件資料後，先將其拷貝乙份副本，然後用副本做增加修改等操作，這樣便不會影響到父元件的資料了。
我們執行一下看看：
看起來驗證規則生效了哈~~
那麼以上都是同步的情況，那麼非同步呢？
假設父元件的資料是非同步ajax獲取的，然後渲染頁面。那麼此時，子元件如何跟著更新檢視呢？
這就得有個監聽機制。當子元件監聽到父元件的資料到位後，將本地資料更新即可。
vue提供的watch可以達到此目的，我們看一下例子。
helloworld.vue
我從父親那邊接收過來的資訊：
字串：}
數字：}
在父元件未更新之前，子元件監聽到的sendobj，新值和舊值都是空陣列，二者是相等的；而當監聽到二者發生不等時，就說明父元件傳來的資訊發生了改變。我們取新值，並將拷貝後的資料傳給data裡面的list，然後更新到檢視。
看一下運**況：
父元件與子元件的互動就實現了。
參考文章：
參考文章：
vue 子元件與父元件的通訊
子元件調父元件的方法 在子元件中通過this.parent.event通過 emit觸發乙個事件，父元件監聽這個事件 通過prop傳入父元件的方法 父元件 home.vue 子元件 helloworld.vue 通過 this.parent.event 呼叫父元件的方法 通過 emit 觸發乙個事件...
vue元件，父元件與子元件之間通訊
vue元件，元件是乙個可復用的功能模組，即將具有相同功能的模組抽取成乙個元件，在需要的地方引用即可，這體現了 封裝的思想，下面看一下元件是如何實現 定義乙個名為 button counter 的新元件 vue.component button counter template you clicked...
vue元件間通訊子與父
二 元件間通訊 子元件傳值給父元件 通過事件的方式來完成資料的傳輸。在父元件中 定義乙個方法，用來接收子元件所通過事件傳來的值 methods 繫結事件處理函式 事件一般情況 都是自定義事件 在子元件觸發事件 事件名，值 this.emit myevent myphone 觸發乙個叫做myevent...