Vue 組件間通信有哪幾種方式？

父子通信

（1）父組件向子組件傳值props

<button-counter :title="send"></button-counter>

Vue.component('button-counter', {
props: ['title'],
data: function() {
    return {
    count: 0
}
},

子向父通信

（2）子組件向父組件傳值  $emit('enlarge-text',10)   on

子組件通過自定義事件向父組件傳遞數據
<button v-on:click="$emit('enlarge-text',10)"></button>

父組件監聽子組件的事件
<menu-item v-on:enlarge-text="fontSize($event)"></menu-item>

子向子通信

( 3 )  子組件之間相互傳值  $emit('enlarge-text',10)   on

<div id="riven">
<button-counter></button-counter>
<button-counter2></button-counter2>
<button @click="handel">清除事件</button>
</div>

              子組件一
methods: {
handel: function() {
//觸發兄弟組件事件
hub.$emit("riven-event", 10)
}
},

mounted: function() {
// 監聽事件
hub.$on("mark-event", (val) => {
this.count += val
})
}
             子組件二
methods: {
handel: function() {
//觸發兄弟組件事件
hub.$emit("mark-event", 1)
}
},

mounted: function() {
// 監聽事件
hub.$on("riven-event", (val) => {
this.count += val
})
}

父組件
methods: {
   handel: function() {
      hub.$off("riven-event");
      hub.$off("mark-event");
}
}

 

（3）Vuex適用於 父子、隔代、兄弟組件通信

• Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。每一個 Vuex 應用的核心就是 store（倉庫）。“store” 基本上就是一個容器，它包含着你的應用中大部分的狀態 (state)。
• Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那么相應的組件也會相應地得到高效更新。
• 改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個狀態的變化。

 

 

 

 

 

Vue 組件間通信只要指以下 3 類通信：父子組件通信、隔代組件通信、兄弟組件通信，下面我們分別介紹每種通信方式且會說明此種方法可適用於哪類組件間通信。
（1）props / $emit適用 父子組件通信

• 這種方法是 Vue 組件的基礎，相信大部分同學耳聞能詳，所以此處就不舉例展開介紹。

（2）ref與 $parent / $children適用 父子組件通信

• ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件實例
• $parent / $children：訪問父 / 子實例

（3）EventBus （$emit / $on）適用於 父子、隔代、兄弟組件通信

• 這種方法通過一個空的 Vue 實例作為中央事件總線（事件中心），用它來觸發事件和監聽事件，從而實現任何組件間的通信，包括父子、隔代、兄弟組件。

（4）$attrs/$listeners適用於 隔代組件通信

• $attrs：包含了父作用域中不被 prop 所識別 (且獲取) 的特性綁定 ( class 和 style 除外 )。當一個組件沒有聲明任何 prop 時，這里會包含所有父作用域的綁定 ( class 和 style 除外 )，並且可以通過 v-bind="$attrs"傳入內部組件。通常配合 inheritAttrs 選項一起使用。
• $listeners：包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它可以通過 v-on="$listeners"傳入內部組件

（5）provide / inject適用於 隔代組件通信

• 祖先組件中通過 provider 來提供變量，然后在子孫組件中通過 inject 來注入變量。provide / inject API主要解決了跨級組件間的通信問題，不過它的使用場景，主要是子組件獲取上級組件的狀態，跨級組件間建立了一種主動提供與依賴注入的關系。

（6）Vuex適用於 父子、隔代、兄弟組件通信

• Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。每一個 Vuex 應用的核心就是 store（倉庫）。“store” 基本上就是一個容器，它包含着你的應用中大部分的狀態 ( state )。
• Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那么相應的組件也會相應地得到高效更新。
• 改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個狀態的變化。