Vue3子組件watch無法監(jiān)聽父組件傳遞的屬性值的解決方法
1 問題描述
假設(shè)子組件 ChildComponent 中有個(gè)屬性a，默認(rèn)值為 0，并且通過偵聽器 watch 監(jiān)聽其數(shù)值變化。在父組件 ParentComponent 中調(diào)用子組件并將屬性a的值賦為1傳遞給子組件，發(fā)現(xiàn)子組件模板中a的值是1，但是 watch 并未監(jiān)聽到屬性a的值發(fā)生了變化。
子組件示例代碼：
<template>
<!-- a的值顯示為1 -->
<div>{{ a }}</div>
</template>
<script setup>
import { watch } from 'vue'
const props = defineProps({
a: {
type: Number,
default: 0
}
})
watch(
() => props.a,
(newValue, oldValue) => {
// 下方信息不會(huì)打印在控制臺(tái)中
console.log('a has changed', newValue, oldVlue)
}
)
</script>
父組件示例代碼：
<template> <ChildComponent :a="1" /> </template>
2 引發(fā)原因
Vue官網(wǎng)：watch 默認(rèn)是懶執(zhí)行的：僅當(dāng)數(shù)據(jù)源變化時(shí)，才會(huì)執(zhí)行回調(diào)。
Vue 在渲染模板時(shí)，先渲染子組件，然后渲染父組件。子組件在初始化時(shí)，屬性a的值被賦為默認(rèn)值0，然后父組件進(jìn)行初始化，將 a=1 傳遞給子組件，子組件接收后將新值覆蓋掉原來的舊值，完成初始化。由于子組件屬性是響應(yīng)式的，所以從0變化為1后，會(huì)更新模板視圖。該過程發(fā)生在組件初始化階段，watch 函數(shù)首次進(jìn)行綁定，不認(rèn)為數(shù)據(jù)源發(fā)生了變化，所以不會(huì)執(zhí)行回調(diào)。
3 解決方法
Vue 提供了 immediate 屬性，設(shè)置該屬性后可以讓 watch 函數(shù)首次綁定后立即執(zhí)行一次回調(diào)，獲取最新的屬性值。
watch(
() => props.a,
(newValue, oldValue) => {
// 打印結(jié)果為 a has changed, 1, 0
console.log('a has changed', newValue, oldVlue)
},
{ immediate: true } // 添加此行
)
到此這篇關(guān)于Vue3子組件watch無法監(jiān)聽父組件傳遞的屬性值的解決方法的文章就介紹到這了,更多相關(guān)Vue3 watch無法監(jiān)聽傳遞的屬性值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了ant?design?vue的form表單取值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了vue組件間通信全面講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
在本篇文章里小編給大家整理的是一篇關(guān)于vue中進(jìn)行微博分享的實(shí)例內(nèi)容，有需要的朋友們可以參考下。2019-10-10
vue中使用$http.post請(qǐng)求傳參的錯(cuò)誤及解決
這篇文章主要介紹了vue中使用$http.post請(qǐng)求傳參的錯(cuò)誤及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue路由跳轉(zhuǎn)router-link清除歷史記錄的三種方式(總結(jié))
這篇文章主要介紹了vue路由跳轉(zhuǎn)router-link清除歷史記錄的三種方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
下面小編就為大家?guī)硪黄獪\談vue的踩坑路。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
Vue中使用echarts實(shí)現(xiàn)繪制人體動(dòng)態(tài)圖
這篇文章主要為大家詳細(xì)介紹了Vue中如何使用echarts實(shí)現(xiàn)繪制人體動(dòng)態(tài)圖,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
編程式路由在我們的項(xiàng)目使用過程中最常用的的方法了。這篇文章主要介紹了講解vue-router之什么是編程式路由，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要給大家介紹了關(guān)于Vue3項(xiàng)目中引入html頁面的相關(guān)資料,Vue3是一個(gè)JavaScript框架,通常我們使用它來構(gòu)建單頁應(yīng)用程序(SPA),如果你想在HTML頁面中使用Vue3,可以參考這篇文章,需要的朋友可以參考下2023-09-09
vue 驗(yàn)證碼界面實(shí)現(xiàn)點(diǎn)擊后標(biāo)灰并設(shè)置div按鈕不可點(diǎn)擊狀態(tài)
今天小編就為大家分享一篇vue 驗(yàn)證碼界面實(shí)現(xiàn)點(diǎn)擊后標(biāo)灰并設(shè)置div按鈕不可點(diǎn)擊狀態(tài)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10