Vue3中的provide、inject如何使用

這篇文章主要講解了“Vue3中的provide、inject如何使用”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“Vue3中的provide、inject如何使用”吧！

創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括莆田網(wǎng)站建設(shè)、莆田網(wǎng)站制作、莆田網(wǎng)頁(yè)制作以及莆田網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，莆田網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到莆田省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

一. 場(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，廢話不多說(shuō)，我們直接上手。

二. 傳遞 Props

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

于是我會(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è)傳話筒。如果這個(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)不止提供字符串類型數(shù)據(jù)而已，我們?cè)?strong>爺爺組件聲明一個(gè)響應(yīng)式的數(shù)據(jù)試試。

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

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

可以看到兒子組件確實(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)有的話就用我");
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>

六. 思考題

如果我現(xiàn)在爺爺組件和父親組件同時(shí)提供了一個(gè)相同的關(guān)鍵詞的值，兒子組件最后會(huì)使用誰(shuí)的呢？

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

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

感謝各位的閱讀，以上就是“Vue3中的provide、inject如何使用”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)Vue3中的provide、inject如何使用這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

當(dāng)前文章：Vue3中的provide、inject如何使用
網(wǎng)頁(yè)地址：http://bm7419.com/article48/gejoep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、外貿(mào)網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、用戶體驗(yàn)、軟件開(kāi)發(fā)、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)