vue3父組件異步props傳值子組件接收不到值問題解決辦法
項(xiàng)目場(chǎng)景：
當(dāng)我們使用vue3進(jìn)行開發(fā)在創(chuàng)建組件的時(shí)候，子組件經(jīng)常需要調(diào)用父組件的數(shù)據(jù)，那么這是就需要vue3的props進(jìn)行對(duì)父組件與子組件通信來達(dá)到傳值的效果
問題描述
在使用props進(jìn)行父子組件通信時(shí)，子組件無法成功渲染數(shù)據(jù)，導(dǎo)致拿到數(shù)據(jù)為空問題
原因分析：
提示：這里填寫問題的分析：
在使用props進(jìn)行父子組件通信時(shí)，如果父組件的數(shù)據(jù)是同步數(shù)據(jù)的話，那么這時(shí)子組件拿到的數(shù)據(jù)就可以直接的渲染在視圖上面這就是我們所說的同步渲染；但如果父組件的數(shù)據(jù)是通過異步獲取的，那么這時(shí)子組件拿到的數(shù)據(jù)屬于異步渲染數(shù)據(jù)，也就是說當(dāng)子組件在拿數(shù)據(jù)的過程中還沒完全拿到數(shù)據(jù)就已經(jīng)開始渲染了這就導(dǎo)致了子組件拿到數(shù)據(jù)后就已經(jīng)渲染完成數(shù)據(jù)了，那么也就無法成功渲染異步數(shù)據(jù)
解決方案：
提示：這里填寫該問題的具體解決方案：
其實(shí)子組件是已經(jīng)成功拿到數(shù)據(jù)了，只是渲染提前了導(dǎo)致無法成功渲染出來；那么我們這時(shí)可以使用vue3的watch來進(jìn)行監(jiān)聽props所拿到的數(shù)據(jù)，之后在進(jìn)行渲染
<script lang="ts">
export default {
props: {
contentText: {
type: String,
default: ''
}
},
setup(props) {
// 監(jiān)聽輸出內(nèi)容變化
watch(() => props.contentText, (newVal: any) => {
valueHtml.value = newVal;
})
}
}
</script>補(bǔ)充：
如果遇到watch:失效的問題以下操作可以解決
watch:{
data:{ //監(jiān)聽的數(shù)據(jù)
handler(val, oldName){
console.log(val)
},
immediate:true,
},
},
設(shè)置一個(gè)immediate為true就可以了
總結(jié)
到此這篇關(guān)于vue3父組件異步props傳值子組件接收不到值問題解決辦法的文章就介紹到這了,更多相關(guān)vue3父組件異步props傳值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue 實(shí)現(xiàn) tomato timer(蕃茄鐘)實(shí)例講解
下面小編就為大家?guī)硪黄獀ue 實(shí)現(xiàn) tomato timer(蕃茄鐘)實(shí)例講解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了詳解Vue開發(fā)微信H5微信分享簽名失敗問題解決方案，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
基于Vue實(shí)現(xiàn)tab欄切換內(nèi)容不斷實(shí)時(shí)刷新數(shù)據(jù)功能
在項(xiàng)目開發(fā)中遇到這樣需求，就是有幾個(gè)tab欄，每個(gè)tab欄對(duì)應(yīng)的ajax請(qǐng)求不一樣，內(nèi)容區(qū)域一樣，內(nèi)容為實(shí)時(shí)刷新數(shù)據(jù)，實(shí)現(xiàn)方法其實(shí)很簡(jiǎn)單的，下面小編給大家?guī)砹嘶赩ue實(shí)現(xiàn)tab欄切換內(nèi)容不斷實(shí)時(shí)刷新數(shù)據(jù)功能，需要的朋友參考下吧2017-04-04
詳解如何在Vue項(xiàng)目中導(dǎo)出Excel
這篇文章主要介紹了如何在Vue項(xiàng)目中導(dǎo)出Excel，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要為大家詳細(xì)介紹了vue日期組件,支持vue1.0和2.0，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要介紹了vue數(shù)據(jù)變化但頁面刷新問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要給大家介紹了關(guān)于vue.js Router中嵌套路由的相關(guān)資料,所謂嵌套路由就是路由里面嵌套他的子路由,文章通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-06-06
這篇文章主要介紹了詳解Vue路由自動(dòng)注入實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue實(shí)現(xiàn)天氣預(yù)報(bào)功能
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)天氣預(yù)報(bào)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Vue實(shí)現(xiàn)計(jì)算器計(jì)算效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)計(jì)算器計(jì)算效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08