在平時的開發過程中，父子 / 兄弟組件間的通信是肯定會遇到的啦，所以這裡總結了 6 種 Vue 組件的通信props / $e$emit / Vuex$attrs / $listeners $parent / $children 與 ref provide / inject 前言 如上圖所示，A/B ...
在平時的開發過程中，父子 / 兄弟組件間的通信是肯定會遇到的啦，所以這裡總結了 6 種 Vue 組件的通信props / $e$emit / Vuex$attrs / $listeners
-
$parent / $children 與 ref
-
provide / inject
前言
如上圖所示，A/B，B/C，B/D 組件是父子關係，C/D 是兄弟關係。那如何根據不同的使用場景，選擇不同的通信方式呢？所以前提就是我們要瞭解不同的通信方式的作用和區別。
一. props / $emit
這個是我們平時用得比較多的方式之一，父組件 A 通過 props 參數向子組件 B 傳遞數據，B 組件通過 $emit 向 A 組件發送一個事件（攜帶參數數據），A組件中監聽 $emit 觸發的事件得到 B 向 A 發送的數據。 我們來具體解釋下它的實現步驟：
1：父組件向子組件傳值
// App.vue 父組件
<template>
<a-compontent :data-a="dataA"></a-compontent>
</template>
<script>
import aCompontent from './components/A.vue';
export default {
name: 'app',
compontent: { aCompontent },
data () {
return {
dataA: 'dataA數據'
}
}
}
// aCompontent 子組件
<template>
<p>{{dataA}}</p> // 在子組件中把父組件傳遞過來的值顯示出來
</template>
<script>
export default {
name: 'aCompontent',
props: {
dataA: { //這個就是父組件中子標簽自定義名字
type: String,
required: true // 或者false
}
}
}
</script>
複製代碼2：子組件向父組件傳值（通過事件方式）
// 子組件
<template>
<p @click="sendDataToParent">點擊向父組件傳遞數據</p>
</template>
<script>
export default {
name: 'child',
methods:{
changeTitle() {
this.$emit('sendDataToParent','這是子組件向父組件傳遞的數據'); // 自定義事件，會觸發父組件的監聽事件，並將數據以參數的形式傳遞
}
}
}
// 父組件
<template>
<child @sendDataToParent="getChildData"></child>
</template>
<script>
import child from './components/child.vue';
export default {
name: 'child',
methods:{
getChildData(data) {
console.log(data); // 這裡的得到了子組件的值
}
}
}
</script>
複製代碼二. $emit / $on
這種方式是通過一個類似 App.vue 的實例作為一個模塊的事件中心，用它來觸發和監聽事件，如果把它放在 App.vue 中，就可以很好的實現任何組件中的通信，但是這種方法在項目比較大的時候不太好維護。
舉個
