Vue3中的provide、inject如何使用

這篇文章主要講解了“Vue3中的provide、inject如何使用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Vue3中的provide、inject如何使用”吧！

一. 場景再現

先別著急考慮標題這個 api 的含義。在這里我先動手寫一個比較常見的場景。
所對應的組件內部代碼比較簡單，這里我就不展示了，邏輯上就是 這三個組件層層引用。

所對應的頁面效果如下：

如上圖，這是一個在項目中很常見的一個場景，三層嵌套的組件。(其實還有深層次的嵌套，目前我們拿三層嵌套舉例足矣)

ok，你現在的需求是：在爺爺組件內需要提供一個字符串數據 “韓振方” 去提供給 兒子組件使用。

聰明的你肯定想到了 props，廢話不多說，我們直接上手。

二. 傳遞 Props

“我以為多高深呢，這不就是數據父傳子的場景嗎？我直接傳遞 props 去完成這個需求。”

于是我會在 GrandFather.vue寫下這樣一段代碼

接下來就該去 Father.vue 組件去接收這個數據了。于是我們在 Father.vue 組件定義了 props 去接收這個值。

我們看一眼頁面

沒什么問題，爸爸組件已經收到了。但是別忘了我們任務還沒完成呢，我們的需求是給兒子組件使用，

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

所以現在我們的 Children.vue 組件的樣子就變成這個樣子。

頁面效果如下:

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

寫到這里你發現了一些不太對勁的地方嗎？????

其實我們的爸爸組件是完全不需要知道這些屬性的，它僅僅只是充當了一個傳話筒。如果這個組件單純是這一個使用場景還好，但是一旦我們想要在第二個地方復用爸爸組件的時候，我們會發現問題就來了。我們必須給這個爸爸組件提供一個叫做 message1 的 props，但是實際上這個 message1 并不是一個爸爸組件內部自己使用的一個屬性。

寫到這里你發現了，僅僅只多傳遞了一層，就導致組件的復用性變得很差。這還是僅僅只嵌套了三層的場景，一旦到了第四層，你會發現事情逐漸開始變得棘手起來了，好像 props 并不是一個好的選擇了。

想到這里你會開始思考，有沒有更好的解決方法呢？你別說，還真有，那就是我們今天的主角，provide 和 inject。

三. provide 和 inject

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

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

那么問題就引出來了，我們怎么正確的使用這兩個 api 呢？其實很簡單，讓我們回到爺爺組件，還原他最初的模樣。

你做的僅僅只需要兩步：

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

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

我們看一下頁面效果:

不僅僅數據成功拿到了，而且關鍵的是我們的爸爸組件是干干凈凈的，絲毫不影響其他地方對它的引用。

我們再回過頭講解 provide 的用法。provide 接受兩個參數。第一個參數需要是一個獨一無二的標識（不允許和組件內部的變量重名），第二個參數就是準備傳遞的值。
你也可以這樣理解，現在爺爺組件拿著一個喇叭在喊????：“誰要‘韓振方’，誰要‘韓振方’，價格便宜，僅僅需要一個‘message’”。

這時候兒子組件聽到了這個消息，大喊：“我要我要！！”于是它就趕緊 inject 了一個 “message”。

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

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

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

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

可以看到，頁面正確的顯示了我們的兜底數據。

四. provide 的進階用法

provide 的作用遠遠不止提供字符串類型數據而已，我們在爺爺組件聲明一個響應式的數據試試。

現在兒子組件長大了，它說我自己也想控制數字的增長，可以嗎？爺爺組件是很寵孫子的，于是又提供了一個方法給孫子使用。

兒子組件真的可以自己控制嗎？孩子真的長大了嗎？

可以看到兒子組件確實是長大了（指成功 inject 了爺爺組件 provide 的函數）

千萬不要轉頭就忘，第二個參數是我們的兜底行為。如果爺爺沒提供函數，我就自己使用一個沒有任何行為的箭頭函數。僅此而已。

五. 源碼

爺爺組件代碼

<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 也同時提供給兒子組件
</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", "假如爺爺沒提供沒有的話就用我");
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">長大了，我自己+1</button>
  </div>
</template>

六. 思考題

如果我現在爺爺組件和父親組件同時提供了一個相同的關鍵詞的值，兒子組件最后會使用誰的呢？

GrandFather.vue: => provide("message","爺爺組件提供的");
Father.vue: =>provide("message","父親組件提供的")

Children.vue:=> inject("message","我使用誰的？")

感謝各位的閱讀，以上就是“Vue3中的provide、inject如何使用”的內容了，經過本文的學習后，相信大家對Vue3中的provide、inject如何使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！