vue3 provide和inject底層組件的值不是響應(yīng)式的處理詳解
更新時間：2023年08月22日 14:26:16 作者：芹丸子
這篇文章主要為大家介紹了vue3 provide和inject底層組件的值不是響應(yīng)式的處理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
前景提示
在學(xué)習(xí)provide和inject是發(fā)現(xià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,但是父組件中顯示時已經(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)問題可以查閱http://chabaoo.cn/javascript/2959180fb.htm
以上就是vue3 provide和inject底層組件的值不是響應(yīng)式的處理詳解的詳細(xì)內(nèi)容，更多關(guān)于vue3 provide inject組件值的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了vue-cli工程webpack的基本用法，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-09-09
Vue Router去掉url中默認(rèn)的錨點(diǎn)#
vue-router默認(rèn)hash模式——使用URL的hash來模擬一個完整的URL，于是當(dāng)URL改變時，頁面不會重新加載。這篇文章主要介紹了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ì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
vue是一套構(gòu)建用戶界面的漸進(jìn)式框架。這篇文章主要介紹了vue cli的相關(guān)知識，本文給大家及時的非常全面,需要的朋友可以參考下2018-02-02
這篇文章主要介紹了vue axios登錄請求攔截器，判斷是否登錄超時，或?qū)φ埱蠼Y(jié)果做一個統(tǒng)一處理的教程詳解,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了vue3使用自定義hooks獲取dom元素的問題說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue echarts模擬后端數(shù)據(jù)流程詳解
在平常的項(xiàng)目中,echarts圖表我們也是使用的非常多的,通常我們從后端拿到數(shù)據(jù),需要在圖表上動態(tài)的進(jìn)行呈現(xiàn),接下來我們就模擬從后端獲取數(shù)據(jù)然后進(jìn)行呈現(xiàn)的方法2022-09-09
crypto-js對稱加密解密的使用方式詳解(vue與java端)
這篇文章主要介紹了如何在Vue前端和Java后端使用crypto-js庫進(jìn)行AES加密和解密,前端通過創(chuàng)建AES.js文件來實(shí)現(xiàn)加密解密功能,并在Vue文件或JavaScript中使用,后端則可以直接使用Java代碼進(jìn)行AES加密和解密操作,需要的朋友可以參考下2025-01-01
vue: WebStorm設(shè)置快速編譯運(yùn)行的方法
今天小編就為大家分享一篇vue: WebStorm設(shè)置快速編譯運(yùn)行的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10