快捷導(dǎo)航

Vue3中的provide、inject 的用法

更新時(shí)間：2023年03月03日 15:24:10 作者：韓振方

這篇文章主要介紹了Vue3中的provide、inject 的用法,需要的朋友可以參考下

一. 場(chǎng)景再現(xiàn)

先別著急考慮標(biāo)題這個(gè) api 的含義。在這里我先動(dòng)手寫(xiě)一個(gè)比較常見(jiàn)的場(chǎng)景。
所對(duì)應(yīng)的組件內(nèi)部代碼比較簡(jiǎn)單，這里我就不展示了，邏輯上就是這三個(gè)組件層層引用。

所對(duì)應(yīng)的頁(yè)面效果如下：

如上圖，這是一個(gè)在項(xiàng)目中很常見(jiàn)的一個(gè)場(chǎng)景，三層嵌套的組件。(其實(shí)還有深層次的嵌套，目前我們拿三層嵌套舉例足矣)

ok，你現(xiàn)在的需求是：在爺爺組件內(nèi)需要提供一個(gè)字符串?dāng)?shù)據(jù) “韓振方” 去提供給 兒子組件使用。

聰明的你肯定想到了 props，廢話(huà)不多說(shuō)，我們直接上手。

二. 傳遞 Props

“我以為多高深呢，這不就是數(shù)據(jù)父?jìng)髯?/strong>的場(chǎng)景嗎？我直接傳遞 props 去完成這個(gè)需求。”

于是我會(huì)在 GrandFather.vue寫(xiě)下這樣一段代碼

接下來(lái)就該去 Father.vue 組件去接收這個(gè)數(shù)據(jù)了。于是我們?cè)?Father.vue 組件定義了 props 去接收這個(gè)值。

我們看一眼頁(yè)面

沒(méi)什么問(wèn)題，爸爸組件已經(jīng)收到了。但是別忘了我們?nèi)蝿?wù)還沒(méi)完成呢，我們的需求是給兒子組件使用，

于是我們又趕緊接著往下傳遞。

所以現(xiàn)在我們的 Children.vue 組件的樣子就變成這個(gè)樣子。

頁(yè)面效果如下:

最終我們的 兒子組件 也確實(shí)拿到了。

寫(xiě)到這里你發(fā)現(xiàn)了一些不太對(duì)勁的地方嗎？??

其實(shí)我們的爸爸組件是完全不需要知道這些屬性的，它僅僅只是充當(dāng)了一個(gè)傳話(huà)筒。如果這個(gè)組件單純是這一個(gè)使用場(chǎng)景還好，但是一旦我們想要在第二個(gè)地方復(fù)用爸爸組件的時(shí)候，我們會(huì)發(fā)現(xiàn)問(wèn)題就來(lái)了。我們必須給這個(gè)爸爸組件提供一個(gè)叫做 message1 的 props，但是實(shí)際上這個(gè) message1 并不是一個(gè)爸爸組件內(nèi)部自己使用的一個(gè)屬性。

寫(xiě)到這里你發(fā)現(xiàn)了，僅僅只多傳遞了一層，就導(dǎo)致組件的復(fù)用性變得很差。這還是僅僅只嵌套了三層的場(chǎng)景，一旦到了第四層，你會(huì)發(fā)現(xiàn)事情逐漸開(kāi)始變得棘手起來(lái)了，好像 props 并不是一個(gè)好的選擇了。

想到這里你會(huì)開(kāi)始思考，有沒(méi)有更好的解決方法呢？??你別說(shuō)，還真有，那就是我們今天的主角，provide 和 inject。

三. provide 和 inject

首先不要死記硬背 api 的名字，作者起名字肯定都是有原因的。在很多情況下我們通過(guò)先看這兩個(gè)單詞的意思。

單從這兩個(gè)單詞的含義就大概能猜出個(gè)大概的意思，一個(gè)是提供某個(gè)值，另一個(gè)是去注冊(cè)，接收這個(gè)值。

那么問(wèn)題就引出來(lái)了，我們?cè)趺凑_的使用這兩個(gè) api 呢？其實(shí)很簡(jiǎn)單，讓我們回到爺爺組件，還原他最初的模樣。

你做的僅僅只需要兩步：

或許你會(huì)驚訝，就這樣就行了？我明確告訴你，是的，這樣就行了。

接下來(lái)最后一步，去兒子組件接收使用就大功告成了。

我們看一下頁(yè)面效果:

不僅僅數(shù)據(jù)成功拿到了，而且關(guān)鍵的是我們的爸爸組件是干干凈凈的，絲毫不影響其他地方對(duì)它的引用。

我們?cè)倩剡^(guò)頭講解 provide 的用法。provide 接受兩個(gè)參數(shù)。第一個(gè)參數(shù)需要是一個(gè)獨(dú)一無(wú)二的標(biāo)識(shí)（不允許和組件內(nèi)部的變量重名），第二個(gè)參數(shù)就是準(zhǔn)備傳遞的值。
你也可以這樣理解，現(xiàn)在爺爺組件拿著一個(gè)喇叭在喊??：“誰(shuí)要‘韓振方’，誰(shuí)要‘韓振方’，價(jià)格便宜，僅僅需要一個(gè)‘message’”。

這時(shí)候兒子組件聽(tīng)到了這個(gè)消息，大喊：“我要我要??！”于是它就趕緊 inject 了一個(gè) “message”。

注意： 你用于接受的變量名字是隨便起的，不需要你和前面保持一致。

而爸爸組件絲毫不想要，所以它就壓根不需要 inject。

并且 inject 還可以允許你有個(gè)兜底的行為。什么意思? 假設(shè)這個(gè)兒子組件在別的地方也需要復(fù)用，但是它的爺爺組件或者它壓根就沒(méi)有爺爺組件，那么第二個(gè)參數(shù)將作為 suibian 的默認(rèn)值。

我們測(cè)試一下，我們首先取消了爺爺組件的 provide 行為。

可以看到，頁(yè)面正確的顯示了我們的兜底數(shù)據(jù)。

四. provide 的進(jìn)階用法

provide 的作用遠(yuǎn)遠(yuǎn)不止提供字符串類(lèi)型數(shù)據(jù)而已，我們?cè)?strong>爺爺組件聲明一個(gè)響應(yīng)式的數(shù)據(jù)試試。

讓我們看一下兒子組件是否可以正確的響應(yīng)。

可以看到，確實(shí)是可以的。

現(xiàn)在兒子組件長(zhǎng)大了，它說(shuō)我自己也想控制數(shù)字的增長(zhǎng)，可以嗎？爺爺組件是很寵孫子的，于是又提供了一個(gè)方法給孫子使用。

兒子組件真的可以自己控制嗎？孩子真的長(zhǎng)大了嗎？

我們測(cè)試一下：

可以看到兒子組件確實(shí)是長(zhǎng)大了（指成功 inject 了爺爺組件 provide 的函數(shù)）

千萬(wàn)不要轉(zhuǎn)頭就忘，第二個(gè)參數(shù)是我們的兜底行為。如果爺爺沒(méi)提供函數(shù)，我就自己使用一個(gè)沒(méi)有任何行為的箭頭函數(shù)。僅此而已。

五. 源碼

爺爺組件代碼

<script lang="ts" setup>
// 這是爺爺組件
import { ref } from "vue";
import { provide } from "vue";

import Father from "./Father.vue";

const count = ref<number>(0);
function add() {
  count.value = count.value + 1;
}

provide("message", count);
provide("messageAdd", add); //我把 add 也同時(shí)提供給兒子組件
</script>
<template>
  <div class="w-full h-[300px] bg-[black]">
    <span class="text-white text-[20px]">爺爺組件</span>
    <button @click="add">message+1</button>
    <Father />
  </div>
</template>

父親組件代碼

<script lang="ts" setup>
// 這是父親組件
import Children from "./Children.vue";
</script>
<template>
  <div class="w-[70%] h-[270px] bg-[pink]">
    <span class="text-[black] text-[20px]">爸爸組件</span>
    <span class="text-[black] text-[15px]"></span>
    <Children />
  </div>
</template>

兒子組件代碼

<script lang="ts" setup>
// 這是兒子組件

import { inject } from "vue";

const suibian = inject("message", "假如爺爺沒(méi)提供沒(méi)有的話(huà)就用我");
const add = inject("messageAdd", () => {});
</script>
<template>
  <div class="w-[70%] h-[230px] bg-[white]">
    <span class="text-[black] text-[20px]">兒子組件</span>
    <span class="text-[black] text-[10px]">{{ suibian }}</span>
    <button @click="add">長(zhǎng)大了，我自己+1</button>
  </div>
</template>