| 企服解答

vue組件通信方式有：props/$emit、 v-slot、$refs/ $parent/$children/$root、$attrs/$listener、provide/inject、eventBus、Vuex。

vue組件通信幾種方式

1、 props/$emit

props和 $emit相信大家十分的熟悉了，這是我們最常用的vue通信方式。

props： props可以是數(shù)組或?qū)ο螅糜诮邮諄?lái)自父組件通過(guò)v-bind傳遞的數(shù)據(jù)。當(dāng)props為數(shù)組時(shí)，直接接收父組件傳遞的屬性；當(dāng) props 為對(duì)象時(shí)，可以通過(guò)type、default、required、validator等配置來(lái)設(shè)置屬性的類型、默認(rèn)值、是否必傳和校驗(yàn)規(guī)則。

$emit： 在父子組件通信時(shí)，我們通常會(huì)使用 $emit來(lái)觸發(fā)父組件v-on在子組件上綁定相應(yīng)事件的監(jiān)聽。

2、 v-slot

v-slot是 Vue2.6 版本中新增的用于統(tǒng)一實(shí)現(xiàn)插槽和具名插槽的api

3、$refs/ $parent/$children/$root

我們也同樣可以通過(guò) $refs/$parent/$children/$root 等方式獲取 Vue 組件實(shí)例，得到實(shí)例上綁定的屬性及方法等，來(lái)實(shí)現(xiàn)組件之間的通信。

$refs： 我們通常會(huì)將 $refs綁定在DOM元素上，來(lái)獲取DOM元素的 attributes。在實(shí)現(xiàn)組件通信上，我們也可以將 $refs 綁定在子組件上，從而獲取子組件實(shí)例。

$parent： 我們可以在 Vue 中直接通過(guò)this.$parent來(lái)獲取當(dāng)前組件的父組件實(shí)例（如果有的話）。

$children： 同理，我們也可以在 Vue 中直接通過(guò)this.$children來(lái)獲取當(dāng)前組件的子組件實(shí)例的數(shù)組。但是需要注意的是，this.$children數(shù)組中的元素下標(biāo)并不一定對(duì)用父組件引用的子組件的順序，例如有異步加載的子組件，可能影響其在 children 數(shù)組中的順序。所以使用時(shí)需要根據(jù)一定的條件例如子組件的name去找到相應(yīng)的子組件。

$root： 獲取當(dāng)前組件樹的根 Vue 實(shí)例。如果當(dāng)前實(shí)例沒有父實(shí)例，此實(shí)例將會(huì)是其自己。通過(guò) $root ，我們可以實(shí)現(xiàn)組件之間的跨級(jí)通信。

4、$attrs/$listener

$attrs和$listeners 都是 Vue2.4 中新增加的屬性，主要是用來(lái)供使用者用來(lái)開發(fā)高級(jí)組件的。

$attrs： 用來(lái)接收父作用域中不作為 prop 被識(shí)別的 attribute 屬性，并且可以通過(guò)v-bind="$attrs"傳入內(nèi)部組件——在創(chuàng)建高級(jí)別的組件時(shí)非常有用。

試想一下，當(dāng)你創(chuàng)建了一個(gè)組件，你要接收 param1 、param2、param3 …… 等數(shù)十個(gè)參數(shù)，如果通過(guò) props，那你需要通過(guò)props: ['param1', 'param2', 'param3', ……]等聲明一大堆。如果這些 props 還有一些需要往更深層次的子組件傳遞，那將會(huì)更加麻煩。

而使用 $attrs ，你不需要任何聲明，直接通過(guò)$attrs.param1、$attrs.param2……就可以使用，而且向深層子組件傳遞上面也給了示例，十分方便。

$listeners： 包含了父作用域中的 v-on 事件監(jiān)聽器。它可以通過(guò) v-on="$listeners" 傳入內(nèi)部組件——在創(chuàng)建更高層次的組件時(shí)非常有用，這里在傳遞時(shí)的使用方法和 $attrs 十分類似。

5、provide/inject

provide/inject這對(duì)選項(xiàng)需要一起使用，以允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴，不論組件層次有多深，并在其上下游關(guān)系成立的時(shí)間里始終生效。如果你是熟悉React的同學(xué)，你一定會(huì)立刻想到Context這個(gè)api，二者是十分相似的。

provide： 是一個(gè)對(duì)象，或者是一個(gè)返回對(duì)象的函數(shù)。該對(duì)象包含可注入其子孫的 property ，即要傳遞給子孫的屬性和屬性值。

injcet： 一個(gè)字符串?dāng)?shù)組，或者是一個(gè)對(duì)象。當(dāng)其為字符串?dāng)?shù)組時(shí)，使用方式和props十分相似，只不過(guò)接收的屬性由data變成了provide中的屬性。當(dāng)其為對(duì)象時(shí)，也和props類似，可以通過(guò)配置default和from等屬性來(lái)設(shè)置默認(rèn)值，在子組件中使用新的命名屬性等。

6、eventBus

eventBus又稱事件總線，通過(guò)注冊(cè)一個(gè)新的Vue實(shí)例，通過(guò)調(diào)用這個(gè)實(shí)例的$emit和$on等來(lái)監(jiān)聽和觸發(fā)這個(gè)實(shí)例的事件，通過(guò)傳入?yún)?shù)從而實(shí)現(xiàn)組件的全局通信。它是一個(gè)不具備 DOM 的組件，有的僅僅只是它實(shí)例方法而已，因此非常的輕便。

7、Vuex

當(dāng)項(xiàng)目龐大以后，在多人維護(hù)同一個(gè)項(xiàng)目時(shí)，如果使用事件總線進(jìn)行全局通信，容易讓全局的變量的變化難以預(yù)測(cè)。于是有了Vuex的誕生。

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。

| 拓展閱讀

以下是一些比較流行的VUE3 UI框架：

1、Ant Design Vue

Ant Design Vue 是一個(gè)非常成熟的框架，使用 Ant Design Vue 創(chuàng)建用戶界面非常簡(jiǎn)單，這些組件可以適應(yīng)各種圖標(biāo)樣式、字體和黑色主題。Ant Design Vue 不斷改進(jìn)其60多個(gè)組件，基本覆蓋項(xiàng)目大部份需求，而且使它們變得更好，更易于訪問。

2、BalmUI

BalmUI 已經(jīng)發(fā)布了他們的 9.0 版本了，該版本支持Vue3。Balm 基于谷歌的 Material Design，這就是為什么它看起來(lái)很熟悉。Balm 附帶 Vue 插件和指令，以及從簡(jiǎn)單到復(fù)雜的高度可定制的組件。

3、Wave UI

WaveUI 在Vue3 發(fā)布后進(jìn)行了良好的定位，WaveUI 的開發(fā)是在 Vue3 仍處于alpha階段時(shí)就開始了，其目標(biāo)是在其API穩(wěn)定后立即支持它，使其成為首批 Vue3 UI框架之一。