這篇文章將為大家詳細(xì)講解有關(guān)Vue組件間通信有哪幾種方式，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站建設(shè)、做網(wǎng)站、奉新網(wǎng)絡(luò)推廣、微信小程序開發(fā)、奉新網(wǎng)絡(luò)營銷、奉新企業(yè)策劃、奉新品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供奉新建站搭建服務(wù)，24小時服務(wù)熱線：18982081108，官方網(wǎng)址：www.cdcxhl.com

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

Vue 組件間通信是面試常考的知識點之一，這題有點類似于開放題，你回答出越多方法當(dāng)然越加分，表明你對 Vue 掌握的越熟練。Vue 組件間通信只要指以下 3 類通信：父子組件通信、隔代組件通信、兄弟組件通信，下面我們分別介紹每種通信方式且會說明此種方法可適用于哪類組件間通信。

（1）props / $emit 適用 父子組件通信

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

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

• ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件實例

• $parent / $children：訪問父 / 子實例

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

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

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

• $attrs：包含了父作用域中不被 prop 所識別 (且獲取) 的特性綁定 ( class 和 style 除外 )。當(dāng)一個組件沒有聲明任何 prop 時，這里會包含所有父作用域的綁定 ( class 和 style 除外 )，并且可以通過 v-bind="$attrs" 傳入內(nèi)部組件。通常配合 inheritAttrs 選項一起使用。

• $listeners：包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽器。它可以通過 v-on="$listeners" 傳入內(nèi)部組件

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

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

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

Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。每一個 Vuex 應(yīng)用的核心就是 store（倉庫）?！皊tore” 基本上就是一個容器，它包含著你的應(yīng)用中大部分的狀態(tài) ( state )。

• Vuex 的狀態(tài)存儲是響應(yīng)式的。當(dāng) Vue 組件從 store 中讀取狀態(tài)的時候，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會相應(yīng)地得到高效更新。

• 改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個狀態(tài)的變化。

關(guān)于“Vue組件間通信有哪幾種方式”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。