Vue3中組件數(shù)據(jù)通信方式總結(jié)

更新時(shí)間：2023年06月02日 15:53:19 作者：書源

如果在面試中，面試官問你Vue組件之間有哪些數(shù)據(jù)通信方式，你會(huì)怎么回復(fù)，不要擔(dān)心，本文為大家整理了超全的Vue3中組件數(shù)據(jù)通信方式，需要的小伙伴快收藏起來吧

父子組件通信

相信大家對(duì)這個(gè)場(chǎng)景都很熟悉，我這里簡(jiǎn)單總結(jié)下這個(gè)場(chǎng)景下的通信方案。

props

在 Vue.js 中實(shí)現(xiàn)“父子組件”單向數(shù)據(jù)通信，一般都是通過 Props 來進(jìn)行的。

所有的 props 都遵循著單向綁定原則，props 因父組件的更新而變化，這避免了子組件意外修改父組件狀態(tài)的情況，不然應(yīng)用的數(shù)據(jù)流將很容易變得混亂而難以理解。

每次父組件更新后，所有的子組件中 props 都會(huì)被更新到最新值，這意味著我們不應(yīng)該在子組件中去更改一個(gè) prop。如果做了，Vue 會(huì)在控制臺(tái)上向你拋出警告：

const props = defineProps(['foo'])
// ? 警告！prop 是只讀的！
props.foo = 'bar'

如果我們?cè)谛枨笾行枰?prop怎么辦？答案是子組件可以拋出一個(gè)事件$emit來通知父組件做出改變。

$emit

在子組件中可以直接使用 $emit 方法觸發(fā)自定義事件，父組件可以通過 v-on (縮寫為 @) 來監(jiān)聽事件，然后在監(jiān)聽的回調(diào)函數(shù)中做出數(shù)據(jù)的改變。示例：

<!-- 子組件觸發(fā)事件 -->
<button @click="$emit('someEvent')">click me</button>
<!-- 父組件監(jiān)聽 -->
<MyComponent @some-event="callback" />

通過$emit，子組件可以通過事件參數(shù)向父組件傳遞數(shù)據(jù)。

不過這種獲取子組件數(shù)據(jù)的方式比較被動(dòng)，需要等待子組件事件的觸發(fā)，但一些特殊場(chǎng)合下父組件需要主動(dòng)獲取子組件數(shù)據(jù)，這時(shí)又該如何處理呢？

ref

ref指的是模版引用，它可以直接訪問DOM元素，也可以被用在一個(gè)子組件上，獲取組件實(shí)例，進(jìn)而操作對(duì)應(yīng)元素或者獲取數(shù)據(jù)。

示例，對(duì) DOM 的直接操作：

<script setup>
import { ref, onMounted } from 'vue'
// 聲明一個(gè) ref 來存放該元素的引用
// 必須和模板里的 ref 同名
const input = ref(null)
onMounted(() => {
  // 用來從父級(jí)組件聚焦輸入框
  input.value.focus()
})
</script>
<template>
  <input ref="input" />
</template>

示例，對(duì)子組件的直接操作：

<script setup>
import { ref, onMounted } from 'vue'
import Child from './Child.vue'
const child = ref(null)
onMounted(() => {
  // child.value 是 <Child /> 組件的實(shí)例
})
</script>
<template>
  <Child ref="child" />
</template>

其它的父子組件通信方式諸如$parent等等，大家請(qǐng)自行理解啦，接下來我們來看下跨級(jí)關(guān)系的組件如何通信。

跨級(jí)組件通信

這個(gè)場(chǎng)景下，適合用 provide/inject 進(jìn)行處理，它允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴，不論組件層次有多深。祖先組件中通過 provider 來提供變量，子孫組件中通過 inject 來注入變量，不過它的使用場(chǎng)景，主要是子組件獲取上級(jí)組件的狀態(tài)。

我們來看個(gè)簡(jiǎn)單的使用案例：

<script setup> 
import { ref, provide } from 'vue'
// 提供靜態(tài)值
provide('foo', 'bar') 
// 提供響應(yīng)式的值
const count = ref(0)
provide('count', count)
</script>
<script setup>
import { inject } from 'vue'
// 注入值的默認(rèn)方式
const foo = inject('foo')
// 注入響應(yīng)式的值
const count = inject('count')
</script>

需要說明的是 provide/inject 在父子組件通信中雖然也OK，但更多的場(chǎng)景是子孫組件。

兄弟組件通信

看到這個(gè)場(chǎng)景，有沒有朋友想到我們可以借助與父組件通信，來完成兄弟組件通信？縱然不看代碼，也能想到這種方案十分繁雜。

借用響應(yīng)式數(shù)據(jù)文件

于是乎，我們可以考慮換個(gè)方案，把通信數(shù)據(jù)都放在一個(gè)響應(yīng)式數(shù)據(jù)的文件里，所有通信需要的組件都直接引用這個(gè)文件里的數(shù)據(jù)，然后直接在各自組件間進(jìn)行讀數(shù)據(jù)或?qū)憯?shù)據(jù)。如果有組件里的模板視圖使用到這個(gè)公共響應(yīng)式數(shù)據(jù)，數(shù)據(jù)被其它組件修改，那也會(huì)同時(shí)觸發(fā)模板視圖的更新。這么多文字看著很抽象，我們來看下示例：

store.js，存放響應(yīng)式數(shù)據(jù)的文件：

import { reactive } from "vue";
export const store = reactive({
  text: "這里是公共響應(yīng)式數(shù)據(jù)文件",
});

B.vue：

<template>
  <div>
    <div>B 組件</div>
    <div>store:{{ store.text }}</div>
  </div>
</template>
<script setup>
import { store } from "./store";
</script>

C.vue：

<template>
  <div>
    <div>C 組件</div>
    <div>store:{{ store.text }}</div>
  </div>
</template>
<script setup>
import { store } from "./store";
</script>

父組件：

<template>
  <div @click="handle">change</div>
  <B></B>
  <C></C>
</template>
<script setup>
import B from "./components/B.vue";
import C from "./components/C.vue";
import { store } from "./components/store";
function handle() {
  store.text = "改變數(shù)據(jù)文件";
}
</script>

B組件和C組件通過響應(yīng)式數(shù)據(jù)文件里的store進(jìn)行通信，當(dāng)我們?cè)诟附M件里改了store.text數(shù)據(jù)，子組件的視圖也會(huì)自動(dòng)更新。

不過聰明的你肯定也發(fā)現(xiàn)了，雖然這樣兄弟組件可以互相通信，但是呢，一旦公共響應(yīng)式數(shù)據(jù)變得龐大，所有引用組件都可以自由修改數(shù)據(jù)，那么數(shù)據(jù)流向管理將會(huì)變得很混亂，不好管理和維護(hù)。

既然我們遇到了這樣的問題，別人同樣會(huì)遇到，于是乎Vue官方為我們提供了Pinia，一個(gè)數(shù)據(jù)管理的 JavaScript 庫。

Pinia

這里我想借鑒一下Pinia官網(wǎng)對(duì)Pinia的描述，更詳細(xì)的描述可以參考官網(wǎng)。

Pinia 是 Vue 的專屬狀態(tài)管理庫，它允許你跨組件或頁面共享狀態(tài)。如果你熟悉組合式 API 的話，你可能會(huì)認(rèn)為可以通過一行簡(jiǎn)單的 export const state = reactive({}) 來共享一個(gè)全局狀態(tài)。對(duì)于單頁應(yīng)用來說確實(shí)可以，但如果應(yīng)用在服務(wù)器端渲染，這可能會(huì)使你的應(yīng)用暴露出一些安全漏洞。而如果使用 Pinia，即使在小型單頁應(yīng)用中，你也可以獲得如下功能：

Devtools 支持