vue3 provide和inject底層組件的值不是響應(yīng)式的處理詳解
更新時間：2023年08月22日 14:26:16 作者：芹丸子
這篇文章主要為大家介紹了vue3 provide和inject底層組件的值不是響應(yīng)式的處理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
前景提示
在學(xué)習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://m.fzitv.net/javascript/2959180fb.htm
以上就是vue3 provide和inject底層組件的值不是響應(yīng)式的處理詳解的詳細內(nèi)容，更多關(guān)于vue3 provide inject組件值的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
在 Linux/Unix 中不重啟 Vim 而重新加載 .vimrc 文件的流程
這篇文章主要介紹了在 Linux/Unix 中不重啟 Vim 而重新加載 .vimrc 文件的流程,需要的朋友可以參考下2018-03-03
Vue.js報錯Failed to resolve filter問題的解決方法
這篇文章主要介紹了Vue.js報錯Failed to resolve filter問題的解決方法,需要的朋友可以參考下2016-05-05
本篇文章主要介紹了vue通過路由實現(xiàn)頁面刷新的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
Vue 動態(tài)組件的應(yīng)用場景很多,可應(yīng)用于動態(tài)頁簽,動態(tài)路由等場景,其核心原理是批量注冊,在Vue2和Vue3中實現(xiàn)原理相同,只是語法略有差異,本文給大家介紹了Vue批量注冊組件實現(xiàn)動態(tài)組件技巧,需要的朋友可以參考下2024-11-11
本篇文章主要介紹了vue腳手架vue-cli的學(xué)習使用教程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
vue中實現(xiàn)methods一個方法調(diào)用另外一個方法
下面小編就為大家分享一篇vue中實現(xiàn)methods一個方法調(diào)用另外一個方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Vue是一套用于構(gòu)建用戶界面的漸進式JavaScript框架,與其它框架不同的是,Vue被設(shè)計為可以自底向上逐層應(yīng)用,這篇文章主要介紹了Vue入門配置、常用指令及Ajax、Axios的相關(guān)資料,需要的朋友可以參考下2026-05-05
一文詳解vue3?watchEffect監(jiān)聽的各種姿勢用法
watchEffect 會自動追蹤在其回調(diào)函數(shù)中使用的所有響應(yīng)式依賴,無需顯式指定數(shù)據(jù)源,本文將為大家總結(jié)一下vue3?watchEffect監(jiān)聽的各種用法,有需要的可以了解下2026-03-03
在現(xiàn)代Web開發(fā)中,實時通信變得越來越重要,MQTT是一種輕量級的消息傳輸協(xié)議,廣泛應(yīng)用于物聯(lián)網(wǎng)(IoT)和實時通信場景,這篇文章主要介紹了vue項目如何使用mqtt通信的相關(guān)資料,需要的朋友可以參考下2026-03-03
這篇文章主要給大家介紹了關(guān)于VUE中watch的詳細使用教程,watch是vue實例的一個屬性,主要用來監(jiān)聽數(shù)據(jù)的變化,并做出一些操作,需要的朋友可以參考下2023-08-08