背景
Vue.js 在前端貌似很火的樣子，雖然年初玩過 Angular.js ，同爲前端框架，使用體驗很類似，但是 Angular.js 的知識已經淡忘了。
十一月份敲過一天 Vue 的 demo ，加入它跟 Java 的 OOP 很相似，分爲屬性和方法，通過行爲改變屬性。直接以面向對象的方式訪問數據就可以了，不需要用 jQuery 操作 DOM 樹，使用相對簡單。所以根據短期之內，Vue 忘記的可能性不大。
本文就來整理一下組件通信的幾種方式，尤其是涉計到彈框組件的通信過程。
常見的通信場景
element 提供了 el-dialog 組件，它的本質是通過 v-show 屬性控制一個彈框組件的顯示和隱藏的。傳統的開發過程中，比較常見的一種場景是：
第一步，彈出一個新的配置頁面
第二步，在配置頁面上輸入表單數據
第三步，點擊 “確定” 按鈕，將用戶在彈出頁面的配置信息回顯到主頁面上
比如，添加收貨地址的彈出框：
點擊 “確定” 後，需要將彈框頁面上的數據回顯在父頁面上。
此外，非彈框子組件和父組件雙向通信的場景：
1、子組件需要父組件傳遞初始化數據，比如，彈出編輯頁面；
2、父組件需要收集子組件修改後的數據，比如，編輯保存操作。
props 和 emit
props 和 emit 基本上能夠滿足非彈框子組件和父組件雙向通信的場景。
但是 props 的侷限在於它是父子組件傳遞數據的方式，是由父組件單向控制子組件屬性的，所以不能在子組件中直接修改自己的 props 屬性，否則 vue 會報錯【示例錯誤信息】：
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten
whenever the parent component re-renders.
Instead, use a data or computed property based on the prop's value.
Prop being mutated: "coo1"
而 emit 需要父組件提供監聽事件，才能觸發。
中和二者，得到的使用經驗是：
第一，子組件只需要父組件傳遞初始數據，然後自己維護 props 數據時，最好使用 props 接收初始值，然後再在 data 函數中以 props 數據爲複本來初始化自己的真實數據。
props: ['myMessage'],
data () {
return {
message: myMessage // 以父組件傳入的屬性的複本作爲初始值
}
}
第二，父組件如果需要使用子組件的數據，可以直接在自己的方法中使用 $refs 訪問子組件的數據。
最簡單的 $refs
父組件引用子組件時，指定它的 ref 屬性標識子組件的引用名詞，然後就能直接通過自己的 $refs 屬性訪問到子組件，使用子組件的數據了。
介紹一個簡單的實例，一個計數子組件的數據要能被父組件直接使用，父組件定義：
<template>
<div class="app-container">
<counter v-show="false" ref="counter"></counter>
<button @click="onShow">提交</button>
<p>counter 當前的計數值爲 {{myCount}}</p>
</div>
</template>
//按鈕事件中，直接訪問子組件的數據值
onShow(){
let counter = this.$refs.counter
console.log('$ref is'+counter)
this.myCount = counter.count;
}
計數子組件定義：
<template>
<button v-on:click="count++">點擊計算點擊次數：{{count}}次</button>
</template>
<script>
export default {
data() {
return {
count: 10,
}
},
}
</script>
啓示錄
就組件通信的各種方式來看，事件觸發是比較繁瑣一點的。$refs 和 props 兩種通信方式學會之後，對解決前面幾類通信場景來說，就夠用了。