Vue 組件間通信是面試惩蛏Γ考的知識點之一胡桨,這題有點類似于開放題,你回答出越多方法當然越加分瞬雹,表明你對 Vue 掌握的越熟練昧谊。Vue 組件間通信只要指以下 3 類通信:父子組件通信、隔代組件通信酗捌、兄弟組件通信呢诬,下面我們分別介紹每種通信方式且會說明此種方法可適用于哪類組件間通信。
(1)props / $emit 適用 父子組件通信
這種方法是 Vue 組件的基礎意敛,相信大部分同學耳聞能詳馅巷,所以此處就不舉例展開介紹。
(2)ref 與 children 適用 父子組件通信
ref:如果在普通的 DOM 元素上使用草姻,引用指向的就是 DOM 元素;如果用在子組件上稍刀,引用就指向組件實例
children:訪問父 / 子實例
(3)EventBus (on) 適用于 父子撩独、隔代敞曹、兄弟組件通信
這種方法通過一個空的 Vue 實例作為中央事件總線(事件中心),用它來觸發(fā)事件和監(jiān)聽事件综膀,從而實現(xiàn)任何組件間的通信澳迫,包括父子、隔代剧劝、兄弟組件橄登。
(4)listeners 適用于 隔代組件通信
$attrs:包含了父作用域中不被 prop 所識別 (且獲取) 的特性綁定 ( class 和 style 除外 )。當一個組件沒有聲明任何 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)染突,跨級組件間建立了一種主動提供與依賴注入的關系捻爷。
(6)Vuex 適用于 父子、隔代份企、兄弟組件通信
Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式涩赢。每一個 Vuex 應用的核心就是 store(倉庫)□锾迹“store” 基本上就是一個容器显熏,它包含著你的應用中大部分的狀態(tài) ( state )。
Vuex 的狀態(tài)存儲是響應式的俐芯。當 Vue 組件從 store 中讀取狀態(tài)的時候棵介,若 store 中的狀態(tài)發(fā)生變化,那么相應的組件也會相應地得到高效更新吧史。
改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation邮辽。這樣使得我們可以方便地跟蹤每一個狀態(tài)的變化。