Vue 2.0提供了多種方式來實現組件通信，包括props&events、$emit&$on、bus、Vuex等。其中，props和events是最基礎、最常用的組件通信方式。

props&events：父組件向子組件傳遞數據，通過向子組件中定義props傳遞數據，子組件通過調用$emit方法觸發自定義事件，從而將信息傳遞回父組件。

//子組件
<template>
<div>
<p>子組件展示數據：{{ childData }}</p>
<button @click="emitData">給父組件發送數據</button>
</div>
</template>
<script>
export default {
name: 'child',
//定義props
props: ['childData'],
methods: {
emitData() {
//觸發自定義事件
this.$emit('getData', '來自子組件的數據');
}
}
}
</script>
//父組件
<template>
<div>
<p>父組件展示數據：{{ parentData }}</p><child :childData="parentData" @getData="getDataFromChild"></child>
</div>
</template>
<script>
export default {
name: 'parent',
data() {
return {
parentData: '父組件的數據'
}
},
methods: {
//接收子組件的數據
getDataFromChild(data) {
console.log(data);
}
}
}
</script>

$emit&$on：子組件向父組件傳遞數據，通過調用$emit方法觸發自定義事件，從而向父組件傳遞數據，在父組件中通過$on監聽該事件，從而獲取子組件的傳遞數據。

//子組件
<template>
<div>
<p>子組件展示數據：{{ childData }}</p>
<button @click="emitData">給父組件發送數據</button>
</div>
</template>
<script>
export default {
name: 'child',
data() {
return {
childData: '子組件的數據'
}
},
methods: {
emitData() {
//觸發自定義事件，傳遞數據
this.$emit('getData', this.childData);
}
}
}
</script>
//父組件
<template>
<div>
<p>父組件展示數據：{{ parentData }}</p><child @getData="getDataFromChild"></child>
</div>
</template>
<script>
export default {
name: 'parent',
data() {
return {
parentData: ''
}
},
methods: {
//接收子組件傳遞的數據
getDataFromChild(data) {
//更新父組件數據
this.parentData = data;
}
}
}
</script>