vue3父子組件數(shù)據(jù)更新不及時(shí)的問題解決方案
使用props向子組件傳值時(shí)，使用如下方式會(huì)導(dǎo)致組件不更新數(shù)據(jù)：
const props = defineProps({
typeOne: {
type: Number,
default: 0
},
typeTwo: {
type: Number,
default: 0
}
});
const searchParams = ref({
typeOne: props.typeOne,
typeTwo: props.typeTwo
});父組件中的typeOne和typeTwo發(fā)生變化時(shí)，searchParams的數(shù)據(jù)不會(huì)發(fā)生變化，因?yàn)閿?shù)據(jù)是單向數(shù)據(jù)流，這里的賦值只會(huì)賦值一次。
通過如下方式解決：
const props = defineProps({
typeOne: {
type: Number,
default: 0
},
typeTwo: {
type: Number,
default: 0
}
});
const { typeOne, typeTwo } = toRefs(props);
const searchParams = ref({
typeOne: computed(() => typeOne.value),
typeTwo: computed(() => typeTwo.value)
});這樣寫了之后，父組件數(shù)據(jù)發(fā)生變化時(shí)，子組件的searchParams中的數(shù)據(jù)就會(huì)跟著變化。
在父組件中要使用nextTick中調(diào)用子組件中獲取數(shù)據(jù)的接口，保證數(shù)據(jù)變化完后調(diào)用接口：
nextTick(() => {
children.getData();
});到此這篇關(guān)于vue3父子組件數(shù)據(jù)更新不及時(shí)的問題解決方案的文章就介紹到這了,更多相關(guān)vue3父子組件數(shù)據(jù)更新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
基于electron+vue3+ts搭建桌面端應(yīng)用并且可以熱更新
這篇文章主要為大家詳細(xì)介紹了如何基于electron+vue3+ts搭建桌面端應(yīng)用并且可以熱更新,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考下2023-10-10
記一次vue-webpack項(xiàng)目?jī)?yōu)化實(shí)踐詳解
這篇文章主要介紹了記一次vue-webpack項(xiàng)目?jī)?yōu)化實(shí)踐，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
使用Vue+Element UI實(shí)現(xiàn)復(fù)選框刪除線效果
在開發(fā)報(bào)告生成、配置選擇等功能時(shí),我們經(jīng)常需要讓用戶選擇包含哪些內(nèi)容,一個(gè)好的UI設(shè)計(jì)應(yīng)該讓用戶清晰地看到哪些選項(xiàng)被選中,哪些被排除,本文將介紹如何使用Vue + Element UI實(shí)現(xiàn)一個(gè)優(yōu)雅的復(fù)選框刪除線效果,需要的朋友可以參考下2026-01-01
這篇文章主要介紹了vue實(shí)現(xiàn)彈幕功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-10
element el-table實(shí)現(xiàn)多級(jí)表頭的代碼
多級(jí)表頭的作用與優(yōu)勢(shì),多級(jí)表頭能夠清晰地展示數(shù)據(jù)的層次結(jié)構(gòu),幫助我們更好地理解數(shù)據(jù)之間的關(guān)系,下面通過本文給大家介紹element el-table實(shí)現(xiàn)多級(jí)表頭的代碼,感興趣的朋友跟隨小編一起看看吧2024-04-04
淺析vue3響應(yīng)式數(shù)據(jù)與watch屬性
這篇文章主要介紹了vue3響應(yīng)式數(shù)據(jù)與watch屬性的相關(guān)知識(shí)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-05-05
Vue監(jiān)聽localstorage變化的方法詳解
在日常開發(fā)中,我們經(jīng)常使用localStorage來存儲(chǔ)一些變量,這些變量會(huì)存儲(chǔ)在瀏覽中,對(duì)于localStorage來說,即使關(guān)閉瀏覽器,這些變量依然存儲(chǔ)著,方便我們開發(fā)的時(shí)候在別的地方使用,本文就給大家介紹Vue如何監(jiān)聽localstorage的變化,需要的朋友可以參考下2023-10-10
v-model 是 Vue 內(nèi)置的指令作為屬性接收一個(gè)變量（不能是常量）綁定到普通組件和自定義組件中，本文給大家介紹Vue3的v-model示例代碼，感興趣的朋友跟隨小編一起看看吧2023-02-02
vue-i18n使用$t導(dǎo)致的Typescript報(bào)錯(cuò)問題及解決
在Vue3項(xiàng)目中使用vue-i18n?v9.14.0時(shí),$t屬性可能因類型未聲明導(dǎo)致TS報(bào)錯(cuò),解決方案是創(chuàng)建src/vue-i18n.d.ts文件,添加至tsconfig.json的include項(xiàng)中,聲明$t屬性類型2025-08-08
對(duì)于Vue為何采用異步渲染，簡(jiǎn)單來說就是為了提升性能，因?yàn)椴徊捎卯惒礁?，在每次更新?shù)據(jù)都會(huì)對(duì)當(dāng)前組件進(jìn)行重新渲染，為了性能考慮，Vue會(huì)在本輪數(shù)據(jù)更新后，再去異步更新視圖，本文主要通過幾個(gè)實(shí)例給大家介紹一下Vue為何采用異步渲染,需要的朋友可以參考下2023-06-06