Vue組件間通信的6種方式，前端工程師人人都會，網友：太簡單了

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。這樣使得我們可以方便地跟蹤每一個狀態的變化。