開始之前，我們把組件間通信這個詞進行拆分
都知道組件是vue最強大的功能之一，vue中每一個.vue我們都可以視之為一個組件
通信指的是發送者通過某種媒體以某種格式來傳遞信息到收信者以達到某個目的。廣義上，任何信息的交通都是通信
組件間通信即指組件(.vue)通過某種方式來傳遞信息以達到某個目的
舉個慄子
我們在使用UI框架中的table組件，可能會往table組件中傳入某些數據，這個本質就形成了組件之間的通信
二、組件間通信解決了什麼在古代，人們通過驛站、飛鴿傳書、烽火報警、符號、語言、眼神、觸碰等方式進行信息傳遞，到了今天，隨著科技水平的飛速發展，通信基本完全利用有線或無線電完成，相繼出現了有線電話、固定電話、無線電話、手機、網際網路甚至視頻電話等各種通信方式
從上面這段話，我們可以看到通信的本質是信息同步，共享
回到vue中，每個組件之間的都有獨自的作用域，組件間的數據是無法共享的
但實際開發工作中我們常常需要讓組件之間共享數據，這也是組件通信的目的
要讓它們互相之間能進行通訊，這樣才能構成一個有機的完整系統
二、組件間通信的分類組件間通信的分類可以分成以下
關係圖:
三、組件間通信的方案整理vue中8種常規的通信方案
props傳遞數據子組件設置props屬性，定義接收父組件傳遞過來的參數Children.vue
props:{
// 字符串形式
name:String // 接收的類型參數
// 對象形式
age:{
type:Number, // 接收的類型為數值
defaule:18, // 默認值為18
require:true // age屬性必須傳遞
}
}
Father.vue組件
<Children name:"jack" age=18 />
$emit 觸發自定義事件子組件通過$emit觸發自定義事件，$emit第二個參數為傳遞的數值
Chilfen.vue
this.$emit('add', good)
Father.vue
<Children @add="cartAdd($event)" />
ref父組件
<Children ref="foo" />
this.$refs.foo // 獲取子組件實例，通過子組件實例我們就能拿到對應的數據
EventBus兄弟組件通過$emit觸發自定義事件，$emit第二個參數為傳遞的數值
Bus.js
// 創建一個中央時間總線類
class Bus {
constructor() {
this.callbacks = {}; // 存放事件的名字
}
$on(name, fn) {
this.callbacks[name] = this.callbacks[name] || [];
this.callbacks[name].push(fn);
}
$emit(name, args) {
if (this.callbacks[name]) {
this.callbacks[name].forEach((cb) => cb(args));
}
}
}
// main.js
Vue.prototype.$bus = new Bus() // 將$bus掛載到vue實例的原型上
// 另一種方式
Vue.prototype.$bus = new Vue() // Vue已經實現了Bus的功能
Children1.vue
this.$bus.$emit('foo')
Children2.vue
this.$bus.$on('foo', this.handle)