總結Vue父子元件的7種通訊方式

父子元件要始終保持單向資料流動

否則隨著業務增長，**會變得難以維護與除錯，因為資料變化的觸發點很難找到

解決方案：

子元件通過this.$emit()事件通知父元件來做處理（sync關鍵字是幫助這種情況而實現的 語法糖）

最近工作不太順利，也非常忙碌。難得靠近春節假期稍微消停了一會，趕緊總結一些在專案開發過過程中經常遇到的點，把一些解決方案羅列一下。

//父.vue

// 子.vue
this.$emit('update', params);

//但是這種方法會使得資料的流動變得混亂，在小專案中會方便，但大專案建議用vuex。

//為了以後著想，還是用vuex
//不要使用this.$parent.$parent...的方式去找，接手你**的人會瘋掉（可以考慮依賴注入）
this.$root.name = 'test';
this.$parent.age = 12;

// 這種方式平常**比較常見，他確實很便利我們去操作子元件。但一般最好都是盡量要避免使用，

// 應該說作為最後乙個救命錦囊
this.$refs.childref.update();

// parent.vue

// provide暴露出去的屬性，能夠在parent.vue的所有子元件中通過inject注入
prodive: function() 
}getparentname() 
// child.vue
inject: ['getparentname']

依賴注入的缺點

所以如果你想要乙個能夠響應式的效果，還是應該考慮使用vuex

訊息訂閱機制，$emit也一樣。

使用的時候要注意vue元件的生命週期，重複觸發的情況要在$on之前先$off掉

以前做android的時候也有這樣的廣播機制。使用的場景也是非常多，最好把這型別的訊息事件名稱用個檔案管理起來。

// 類似這樣，讓訊息透明可見。

const event_bus =

// parent.vue

sessionstorage.setitem('name', '小明');
// child.vue
sessionstorage.getitem('name');

Vue父子元件通訊

1.父與子通訊，通過屬性傳遞值，如下 lang zh cn charset utf 8 src js vue.js script title head id example p parent div type text x template id parenttpl 這是父元件h1 name zha...

vue父子元件通訊

一 父元件利用props往子元件傳輸資料 父元件 注意傳遞引數時要用 代替駝峰命名，html不區分大小寫 子元件 vue.component child template 二 子元件向父元件傳遞引數利用事件機制 子元件通過this.emit 派發事件，父元件利用v on對事件進行監聽，實現引數的傳遞...

Vue父子元件通訊

抓住幾個語義特點就可以了。子元件要接收父元件傳過來的內容，需要引入props，也就是說有props就是子元件 以下是子元件的內容 p div template export default script 父元件需要往子元件傳入引數，則某個部分要和引數post對應，即 v bind post post...