vue3 provide和inject底層組件的值不是響應(yīng)式的處理詳解
更新時(shí)間：2023年08月22日 14:26:16 作者：芹丸子
這篇文章主要為大家介紹了vue3 provide和inject底層組件的值不是響應(yīng)式的處理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
前景提示
在學(xué)習(xí)provide和inject是發(fā)現(xiàn)一個(gè)問(wèn)題就是頂層組件使用功provide傳遞的值在基層組件中使用inject接收后不是響應(yīng)式的,如下代碼所示
//頂層組件代碼
const count = ref(100);
provide('count-key',count);
const setCount = ()=>{
count.value = 99;
}
<template>
<div>{{count}}</div>//99
</template>
//底層組件
const count = inject('count-key');
const setCount = inject('set-count);
onMounted(()=>{
setCount();
})
/*子組件的onMounted執(zhí)行完成之后父組件的onMounted函數(shù)才執(zhí)行完成,所以在子組件中顯示的100,但是父組件中顯示時(shí)已經(jīng)修改了count的值,所以父組件中顯示的99,子組件中顯示的100*/
<template>
<div>{{count}}</div>//100
</template>解決方法
//頂層組件代碼
const count = ref(100);
provide('count-key',count);
const setCount = ()=>{
count.value = 99;
return {
countNum:count.value
}
}
provide('set-count',setcount)
<template>
<div>{{count}}</div>//99
</template>
//底層組件
const count = inject('count-key');
const setCount = inject('set-count');
const countNum = setCount().countNum
<template>
<div>{{count}}--{{countNum}}</div>//100--99
</template>
在子組件中使用的count的值還是和上面一段代碼的解釋一樣,但是父組件的count和子組件的countNum的值都是重新包裝之后才顯示所以是響應(yīng)式改變的這里感謝 Jyann博主的文章給予的幫助,在這里貼上鏈接,里面的內(nèi)容更加的全面,大家有相關(guān)問(wèn)題可以查閱http://www.dbjr.com.cn/javascript/2959180fb.htm
以上就是vue3 provide和inject底層組件的值不是響應(yīng)式的處理詳解的詳細(xì)內(nèi)容，更多關(guān)于vue3 provide inject組件值的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了vue-cli工程webpack的基本用法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-09-09
Vue Router去掉url中默認(rèn)的錨點(diǎn)#
vue-router默認(rèn)hash模式——使用URL的hash來(lái)模擬一個(gè)完整的URL，于是當(dāng)URL改變時(shí)，頁(yè)面不會(huì)重新加載。這篇文章主要介紹了Vue Router去掉url中默認(rèn)的錨點(diǎn)#,需要的朋友可以參考下2018-08-08
Vue實(shí)現(xiàn)高德坐標(biāo)轉(zhuǎn)GPS坐標(biāo)功能的示例詳解
生活中常用的幾種坐標(biāo)有：WGS-84、GCJ-02與BD-09。本文將利用Vue實(shí)現(xiàn)高德坐標(biāo)轉(zhuǎn)GPS坐標(biāo)功能，即實(shí)現(xiàn)GCJ-02坐標(biāo)轉(zhuǎn)換成WGS-84坐標(biāo)，需要的可以參考一下2022-04-04
vue+element ui實(shí)現(xiàn)錨點(diǎn)定位
這篇文章主要為大家詳細(xì)介紹了vue+element ui實(shí)現(xiàn)錨點(diǎn)定位，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
vue是一套構(gòu)建用戶界面的漸進(jìn)式框架。這篇文章主要介紹了vue cli的相關(guān)知識(shí)，本文給大家及時(shí)的非常全面,需要的朋友可以參考下2018-02-02
這篇文章主要介紹了vue axios登錄請(qǐng)求攔截器，判斷是否登錄超時(shí)，或?qū)φ?qǐng)求結(jié)果做一個(gè)統(tǒng)一處理的教程詳解,需要的朋友可以參考下2018-04-04
vue3使用自定義hooks獲取dom元素的問(wèn)題說(shuō)明
這篇文章主要介紹了vue3使用自定義hooks獲取dom元素的問(wèn)題說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue echarts模擬后端數(shù)據(jù)流程詳解
在平常的項(xiàng)目中,echarts圖表我們也是使用的非常多的,通常我們從后端拿到數(shù)據(jù),需要在圖表上動(dòng)態(tài)的進(jìn)行呈現(xiàn),接下來(lái)我們就模擬從后端獲取數(shù)據(jù)然后進(jìn)行呈現(xiàn)的方法2022-09-09
crypto-js對(duì)稱加密解密的使用方式詳解(vue與java端)
這篇文章主要介紹了如何在Vue前端和Java后端使用crypto-js庫(kù)進(jìn)行AES加密和解密,前端通過(guò)創(chuàng)建AES.js文件來(lái)實(shí)現(xiàn)加密解密功能,并在Vue文件或JavaScript中使用,后端則可以直接使用Java代碼進(jìn)行AES加密和解密操作,需要的朋友可以參考下2025-01-01
vue: WebStorm設(shè)置快速編譯運(yùn)行的方法
今天小編就為大家分享一篇vue: WebStorm設(shè)置快速編譯運(yùn)行的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10