【干貨】Vue3 組件通信方式詳解

前言

毫無(wú)疑問(wèn)，組件通信是Vue中非常重要的技術(shù)之一，它的出現(xiàn)能夠使我們非常方便的在不同組件之間進(jìn)行數(shù)據(jù)的傳遞，以達(dá)到數(shù)據(jù)交互的效果。所以，學(xué)習(xí)組件通信技術(shù)是非常有必要的，本文將總結(jié)Vue中關(guān)于組件通信的八種方式，幫助大家在使用Vue的過(guò)程中更加得心應(yīng)手！

如果文中有不對(duì)、疑惑的地方，歡迎在評(píng)論區(qū)留言指正�。�

一、什么是組件通信

在開(kāi)始之前我們需要明白什么是組件通信， 組件通信 可以拆分為兩個(gè)部分：

• 組件
• 通信

都知道組件是 vue 最強(qiáng)大的功能之一， vue 中每一個(gè) .vue 文件我們都可以視之為一個(gè)組件，簡(jiǎn)單來(lái)說(shuō)組件就是對(duì)UI結(jié)構(gòu)的復(fù)用。

通信指的是發(fā)送者通過(guò)某種媒體以某種格式來(lái)傳遞信息到收信者以達(dá)到某個(gè)目的。廣義上，任何信息的交通都是通信。而 組件間通信 即指組件( .vue )通過(guò)某種方式來(lái)傳遞信息以達(dá)到某個(gè)目的，舉個(gè)栗子我們?cè)谑褂? UI 框架中的 table 組件，可能會(huì)往 table 組件中傳入某些數(shù)據(jù)，這個(gè)本質(zhì)就形成了組件之間的通信

二、為什么要進(jìn)行組件通信

通信的本質(zhì)是信息同步，共享�；氐絭ue中，每個(gè)組件之間的都有獨(dú)自的作用域，組件間的數(shù)據(jù)是無(wú)法共享的但實(shí)際開(kāi)發(fā)工作中我們常常需要讓組件之間共享數(shù)據(jù)，這也是組件通信的目的要讓它們互相之間能進(jìn)行通訊，這樣才能實(shí)現(xiàn)數(shù)據(jù)間的交互，完成某種功能的開(kāi)發(fā)。

三、組件通信的分類

組件間通信的分類可以分成以下

• 父子組件之間的通信
• 兄弟組件之間的通信
• 祖孫與后代組件之間的通信
• 非關(guān)系組件間之間的通信

他們之間的關(guān)系如下圖：

目前最常用是 props/$emit 和 vuex/pinia ，接下來(lái)是 provide/inject ，其他不建議使用；
實(shí)際項(xiàng)目中，簡(jiǎn)單父子組件傳遞采用 props/$emit ，涉及全局共享的數(shù)據(jù)一般采用 vuex/pinia 結(jié)合存儲(chǔ)對(duì)象 localStorage/sessionStorage 使用。

四、Vue3 的八種組件通信方式

• props
• $emit
• expose / ref
• $attrs
• v-model
• provide / inject
• Vuex
• mitt

五、Vue3 八種通信方式用法講解

1. props

用 props 傳數(shù)據(jù)給子組件有兩種方法，如下

方法一，setup() 方法寫(xiě)法

// Parent.vue 傳送



// Child.vue 接收

方法二，setup 語(yǔ)法糖

// Parent.vue 傳送



// Child.vue 接收

注意：

如果父組件是setup()，子組件setup 語(yǔ)法糖寫(xiě)法的話，是接收不到父組件里 data 的屬性，只能接收到父組件里 setup 函數(shù)里傳的屬性。

如果父組件是setup 語(yǔ)法糖寫(xiě)法，子組件setup()方法寫(xiě)法，可以通過(guò) props 接收到 data 和 setup 函數(shù)里的屬性，但是子組件要是在 setup 里接收，同樣只能接收到父組件中 setup 函數(shù)里的屬性，接收不到 data 里的屬性

官方也說(shuō)了，既然用了 3，就不要寫(xiě) 2 了，所以不推薦setup()方法寫(xiě)法。下面的例子，一律只用語(yǔ)法糖的寫(xiě)法。

2. $emit

// Child.vue 派發(fā)



// Parent.vue 響應(yīng)

3. expose / ref

父組件獲取子組件的屬性或者調(diào)用子組件方法。

// Child.vue


// Parent.vue  注意 ref="comp"

4. attrs

attrs ：包含父作用域里除 class 和 style 除外的非 props 屬性集合 。

// Parent.vue 傳送



// Child.vue 接收

5. v-model

可以支持多個(gè)數(shù)據(jù)雙向綁定

// Parent.vue



// Child.vue

6. provide / inject

provide / inject 為依賴注入

provide ：可以讓我們指定想要提供給后代組件的數(shù)據(jù)或

inject ：在任何后代組件中接收想要添加在這個(gè)組件上的數(shù)據(jù)，不管組件嵌套多深都可以直接拿來(lái)用

// Parent.vue


// Child.vue

7. Vuex

// store/index.js
import { createStore } from "vuex"
export default createStore({
    state:{ count: 1 },
    getters:{
        getCount: state => state.count
    },
    mutations:{
        add(state){
            state.count++
        }
    }
})

// main.js
import { createApp } from "vue"
import App from "./App.vue"
import store from "./store"
createApp(App).use(store).mount("#app")

// Page.vue
// 方法一 直接使用


// 方法二 獲取

8. mitt

Vue3 中沒(méi)有了 EventBus 跨組件通信，但是現(xiàn)在有了一個(gè)替代的方案 mitt.js，原理還是 EventBus。

先安裝 npm i mitt -S

然后像以前封裝 bus 一樣，封裝一下

mitt.js
import mitt from 'mitt'
const mitt = mitt()
export default mitt

然后兩個(gè)組件之間通信的使用

// 組件 A


// 組件 B 

六、參考資料

vue.js： https://cn.vuejs.org/

vuex是什么： https://vuex.vuejs.org/zh/

工作中要使用Git，看這篇文章就夠了： http://www.guosisoft.com/article/detail/410508049313861

企業(yè)數(shù)字化轉(zhuǎn)型如何做？看過(guò)來(lái)： http://www.guosisoft.com/article/detail/408745545576517

Vue2.x 組件通信方式： http://www.guosisoft.com/article/detail/411234710110277

【保姆級(jí)教程】Vue項(xiàng)目調(diào)試技巧： http://www.guosisoft.com/article/detail/430312211521605

Vue 前端開(kāi)發(fā)團(tuán)隊(duì)風(fēng)格指南（史上最全）： http://www.guosisoft.com/article/detail/415491255230533

國(guó)思RDIF低代碼快速開(kāi)發(fā)平臺(tái)（支持vue2、vue3）： http://www.guosisoft.com/article/detail/557095625134149

七、結(jié)語(yǔ)

如果本文對(duì)你有一點(diǎn)點(diǎn)幫助，點(diǎn)個(gè)贊支持一下吧，你的每一個(gè)【贊】都是我創(chuàng)作的最大動(dòng)力 ^_

更多技術(shù)文章請(qǐng)往:

http://www.guosisoft.com/article

http://www.rdiframework.net/article

大家一起共同交流和進(jìn)步呀!!