每日一道面試題：Vue 元件間通信有哪幾種方式？

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

父子元件通信、隔代元件通信、兄弟元件通信

（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。這樣使得我們可以友善地跟蹤每一個狀态的變化。