vue組件通信幾種方式

| 企服解答

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

vue組件通信幾種方式

1、 props/$emit

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

props： props可以是數組或對象，用于接收來自父組件通過v-bind傳遞的數據。當props為數組時，直接接收父組件傳遞的屬性；當 props 為對象時，可以通過type、default、required、validator等配置來設置屬性的類型、默認值、是否必傳和校驗規則。

$emit： 在父子組件通信時，我們通常會使用 $emit來觸發父組件v-on在子組件上綁定相應事件的監聽。

2、 v-slot

v-slot是 Vue2.6 版本中新增的用于統一實現插槽和具名插槽的api

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

我們也同樣可以通過 $refs/$parent/$children/$root 等方式獲取 Vue 組件實例，得到實例上綁定的屬性及方法等，來實現組件之間的通信。

$refs： 我們通常會將 $refs綁定在DOM元素上，來獲取DOM元素的 attributes。在實現組件通信上，我們也可以將 $refs 綁定在子組件上，從而獲取子組件實例。

$parent： 我們可以在 Vue 中直接通過this.$parent來獲取當前組件的父組件實例（如果有的話）。

$children： 同理，我們也可以在 Vue 中直接通過this.$children來獲取當前組件的子組件實例的數組。但是需要注意的是，this.$children數組中的元素下標并不一定對用父組件引用的子組件的順序，例如有異步加載的子組件，可能影響其在 children 數組中的順序。所以使用時需要根據一定的條件例如子組件的name去找到相應的子組件。

$root： 獲取當前組件樹的根 Vue 實例。如果當前實例沒有父實例，此實例將會是其自己。通過 $root ，我們可以實現組件之間的跨級通信。

4、$attrs/$listener

$attrs和$listeners 都是 Vue2.4 中新增加的屬性，主要是用來供使用者用來開發高級組件的。

$attrs： 用來接收父作用域中不作為 prop 被識別的 attribute 屬性，并且可以通過v-bind="$attrs"傳入內部組件——在創建高級別的組件時非常有用。

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

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

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

5、provide/inject

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

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

injcet： 一個字符串數組，或者是一個對象。當其為字符串數組時，使用方式和props十分相似，只不過接收的屬性由data變成了provide中的屬性。當其為對象時，也和props類似，可以通過配置default和from等屬性來設置默認值，在子組件中使用新的命名屬性等。

6、eventBus

eventBus又稱事件總線，通過注冊一個新的Vue實例，通過調用這個實例的$emit和$on等來監聽和觸發這個實例的事件，通過傳入參數從而實現組件的全局通信。它是一個不具備 DOM 的組件，有的僅僅只是它實例方法而已，因此非常的輕便。

7、Vuex

當項目龐大以后，在多人維護同一個項目時，如果使用事件總線進行全局通信，容易讓全局的變量的變化難以預測。于是有了Vuex的誕生。

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。

| 拓展閱讀

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

1、Ant Design Vue

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

2、BalmUI

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

3、Wave UI

WaveUI 在Vue3 發布后進行了良好的定位，WaveUI 的開發是在 Vue3 仍處于alpha階段時就開始了，其目標是在其API穩定后立即支持它，使其成為首批 Vue3 UI框架之一。