父子組件間的通訊，其實很簡單止喷，在前文好多地方都涉及到了，只是沒有專門提及混聊。
不過弹谁，組件通訊里邊有個坑，幫大家繞一繞句喜。
App組件和Aside(menu)組件,Aside組件通過App組件控制內(nèi)容區(qū)顯示预愤，最適合展示這個內(nèi)容。
先來看前面提過的一張圖：
組件交互.PNG
我們就其中的虛線一部分進行分析：
- 父組件通過【props】與子組件通訊
- 子組件通過【事件】向父組件傳遞信息
顯而易見的咳胃，父組件通過props可以控制子組件顯示的內(nèi)容植康，子組件通過發(fā)送事件，父組件響應(yīng)事件展懈，改變自身销睁。這么簡單供璧，當(dāng)然沒什么說的。關(guān)鍵是“坑”冻记。
在說坑前睡毒，先說這種父子通訊模式的的限制
- 平行組件間的通訊受限制∪呃酰可以通過一條通訊總線演顾，把同級別間的組件掛在總線上通訊。
- 爺孫組件通訊贞瞒，還得麻煩父組件偶房，倘若祖父和從孫呢，倘若...
第一個問題军浆，有vuex，麻煩一點就是了挡闰。這種其實可以通過設(shè)計模式避免乒融。
第二個問題，ElementUI給出一個辦法摄悯，可以參考'element-ui/src/mixins/emitter'這種廣播模式赞季。當(dāng)然這種廣播模式也能解決第一個問題。有點怪怪的就是了奢驯，不太符合代碼潔凈的原則申钩。我們后面會和這個東西打交道，這里先提一下瘪阁。
下面通過代碼看《坑》：（這段代碼不能直接運行Ｈ銮病！管跺！了解意思得了）
當(dāng)父組件響應(yīng)事件時义黎，可能給自己添加新屬性，這時候會出現(xiàn)問題豁跑。
/* 子組件 **/
{
template: '<div @click="onClick">{{value}}</div>',
props: ['name', 'value'],
// ...
methods: {
onClick() {
this.$emit('add', this.name, Math.random());
},
},
}
/* 父組件 **/
{
template: '<child name="name" :value="values['name']" @add="onAdd">';
// 更一般的情況是廉涕，values來自props，同時爺組件甚至沒有給values傳遞值
data {
return {
values: undifined;
};
},
// ...
methods: {
onAdd(name, value) {
// 悲劇再這里發(fā)生
this.values[name] = value;
},
},
}
悲劇出現(xiàn)了艇拍，單擊后狐蜕，什么也沒發(fā)生...,不是應(yīng)該每次換一個隨機數(shù)嗎？父組件通過props控制不了子組件了卸夕？
問題躍然紙上了：
vue文檔有這么一句話：如果在實例創(chuàng)建之后添加新的屬性到實例上层释，它不會觸發(fā)視圖更新。
在我們的這套系統(tǒng)中娇哆，這個問題后面會碰到的湃累。添加新屬性的坑大家都能繞過勃救，但是祖孫三個組件混在一起，通訊混在一起治力，就不太起眼了蒙秒，成了陷阱。解決辦法是$set:this.$set(this.values, name, value);宵统。
