總體來說，Vue中組件之間的通信場景如下圖：
可以將其分為父子組件通信、兄弟組件通信、跨級組件通信。
1. 自定義事件
子組件-->父組件： 采用自定義事件，子組件用$emit()來觸發事件，父組件用$on()來監聽子組件事件，父組件也可以直接在子組件的自定義標簽上使用v-on來監聽子組件觸發的自定義事件：
<!-- 自定義事件 -->
<body>
<div id="app">
<p>SUM: {{total}} </p>
<!-- 父組件用v-on監聽子組件事件，做出處理 -->
<my-component
@increase = "handleGetTotal"
@reduce = "handleGetTotal"
></my-component>
</div>
<script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
Vue.component('my-component',{
template: '<div><button @click="handleIncrease">+1</button> <button @click="handleReduce">-1</button></div>',
data: function() {
return {
counter: 0
}
},
methods: {
handleIncrease: function() {
this.counter++;
//使用$emit觸發increase事件，第一個參數為自定義事件的名稱，第二個參數是要傳遞的數據
this.$emit('increase', this.counter);
},
handleReduce: function() {
this.counter--;
this.$emit('reduce', this.counter);
}
}
});
var app = new Vue({
el: '#app',
data: {
total: 0,
},
methods: {
handleGetTotal: function(total) {
this.total = total;
}
}
})
</script>
</body>
子組件有兩個按鈕，分別實現+1和-1的效果，在改變counter后，通過$emit()把它傳遞給父組件，父組件通過v-on獲取并作出處理。
2. 使用v-model
Vue2.x 中也可以在自定義組件中使用v-model指令：
<!-- 自定義事件使用v-model -->
<body>
<div id="app">
<p>SUM: {{total}} </p>
<my-component v-model="total"></my-component>
</div>
<script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
Vue.component('my-component',{
template: '<div><button @click="handleIncrease">+1</button><button @click="handleReduce">-1</button></div>',
data: function() {
return {
counter: 0
}
},
methods: {
handleIncrease: function() {
this.counter++;
this.$emit('input', this.counter);
},
handleReduce: function() {
this.counter--;
this.$emit('input', this.counter);
}
}
});
var app = new Vue({
el: '#app',
data: {
total: 0,
},
})
</script>
</body>
所實現效果一樣，但是現在子組件$emit()的事件名為特殊的input，在父組件中，直接使用了v-model綁定一個數據total。這其實是一個語法糖，其實際實現為：
<my-component @input="handleGetTatal"></my-component>
...
methods: {
handleGetTotal: function(total) {
this.total = total;
}
}
v-model還可以用來創建自定義的表單輸入組件，進行數據雙向綁定。
3. 非父子組件通信--中央事件總線
在Vue 2.x中，推薦使用一個空的Vue實例作為中央事件總線（bus），直接看代碼理解：
<!-- 非父子組件通信--中央事件總線 -->
<body>
<div id="app">
<p>{{message}}</p>
<my-component></my-component>
</div>
<script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var bus = new Vue();
Vue.component('my-component',{
template: '<div><button @click="handleEvent"">傳遞事件</button></div>',
methods: {
handleEvent: function() {
bus.$emit('on-message', '來自組件my-component的內容');
},
}
});
var app = new Vue({
el: '#app',
data: {
message: '',
},
mounted: function() {
var _this = this;
//在實例初始化時，監聽來自bus實例的事件
bus.$on('on-message', function(msg) {
_this.message = msg;
});
}
})
</script>
</body>
上述代碼中為了方便起見，我們還是以父子組件為例的，但目的是為了理解代碼中名為bus的空Vue實例。
在bus實例中，沒有任何內容，實例app初始化時，會在生命周期鉤子函數mounted中監聽來自bus的事件on-message，而組件my-component中的按鈕點擊將on-message事件通過bus傳遞了給了app。
如果深入使用，可以擴展bus實例，為他添加data、methods、computed等選項，這些都是公用的，在實際業務中，比如用戶登錄的昵稱、性別、郵箱等通用信息，只需要在初始化時被bus獲取一次，則之后其他組件就可以直接使用了。
4. 父鏈 & 子組件索引
除了中央事件總線bus外，還有兩種方法可以實現組件之間的通信，父鏈和子組件索引。
**父鏈 **
在子組件中，使用this.$parent可以直接訪問該組件的父實例，父組件也可以通過this.$children訪問它的所有子組件，從而完成遞歸向上或向下的訪問：
<!-- 父鏈 -->
<body>
<div id="app">
<p>{{message}}</p>
<my-component></my-component>
</div>
<script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
Vue.component('my-component',{
template: '<div><button @click="handleEvent"">通過父鏈直接修改父組件數據</button></div>',
methods: {
handleEvent: function() {
//訪問到父鏈并修改其數據
this.$parent.message = '來自子組件的修改數據';
},
}
});
var app = new Vue({
el: '#app',
data: {
message: '我本來的數據',
},
})
</script>
</body>
在業務中，應該盡可能避免子組件依賴父組件中的數據，更不應該主動修改它的數據，這不滿足父子組件之間解耦的原則。
理想情況下，只有組件自己可以修改自己的狀態。父子組件最好還是通過props和$emit來完成通信。
子組件索引
當子組件較多時，通過this.$children來遍歷出所需要的子組件時比較困難的，因此Vue提供了子組件索引的方法，用特殊的屬性ref來為子組件指定一個索引名稱：
<!-- 子組件索引 -->
<body>
<div id="app">
<div>{{message}}</div>
<button @click="handleRef">通過ref獲取子組件實例</button>
<my-component ref="myComponent"></my-component>
</div>
<script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
Vue.component('my-component',{
data: function() {
return {
message: '子組件內容'
}
}
});
var app = new Vue({
el: '#app',
data: function() {
return {
message: ''
}
},
methods: {
handleRef: function() {
//通過$refs訪問指定子組件實例
var msg = this.$refs.myComponent.message;
this.message = msg;
}
}
})
</script>
</body>
上述代碼，子組件標簽上使用ref指定一個名稱，并在父組件內通過this.$refs來訪問到相應子組件。
$refs只在組件渲染完成后才填充，并且它時非響應式的，僅僅作為直接訪問子組件的應急方案，應盡量避免使用。
參考
- 《Vue.js 實戰》
