快捷導(dǎo)航

vue3父組件異步props傳值子組件接收不到值問(wèn)題解決辦法

更新時(shí)間：2024年01月20日 09:15:43 作者：m0_62857167

這篇文章主要給大家介紹了關(guān)于vue3父組件異步props傳值子組件接收不到值問(wèn)題的解決辦法,需要的朋友可以參考下

項(xiàng)目場(chǎng)景：

當(dāng)我們使用vue3進(jìn)行開(kāi)發(fā)在創(chuàng)建組件的時(shí)候，子組件經(jīng)常需要調(diào)用父組件的數(shù)據(jù)，那么這是就需要vue3的props進(jìn)行對(duì)父組件與子組件通信來(lái)達(dá)到傳值的效果

問(wèn)題描述

在使用props進(jìn)行父子組件通信時(shí)，子組件無(wú)法成功渲染數(shù)據(jù)，導(dǎo)致拿到數(shù)據(jù)為空問(wèn)題

原因分析：

提示：這里填寫(xiě)問(wèn)題的分析：

在使用props進(jìn)行父子組件通信時(shí)，如果父組件的數(shù)據(jù)是同步數(shù)據(jù)的話(huà)，那么這時(shí)子組件拿到的數(shù)據(jù)就可以直接的渲染在視圖上面這就是我們所說(shuō)的同步渲染；但如果父組件的數(shù)據(jù)是通過(guò)異步獲取的，那么這時(shí)子組件拿到的數(shù)據(jù)屬于異步渲染數(shù)據(jù)，也就是說(shuō)當(dāng)子組件在拿數(shù)據(jù)的過(guò)程中還沒(méi)完全拿到數(shù)據(jù)就已經(jīng)開(kāi)始渲染了這就導(dǎo)致了子組件拿到數(shù)據(jù)后就已經(jīng)渲染完成數(shù)據(jù)了，那么也就無(wú)法成功渲染異步數(shù)據(jù)

解決方案：

提示：這里填寫(xiě)該問(wèn)題的具體解決方案：

其實(shí)子組件是已經(jīng)成功拿到數(shù)據(jù)了，只是渲染提前了導(dǎo)致無(wú)法成功渲染出來(lái)；那么我們這時(shí)可以使用vue3的watch來(lái)進(jìn)行監(jiān)聽(tīng)props所拿到的數(shù)據(jù)，之后在進(jìn)行渲染

<script lang="ts">
export default {
  props: {
    contentText: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    // 監(jiān)聽(tīng)輸出內(nèi)容變化
    watch(() => props.contentText, (newVal: any) => {
      valueHtml.value = newVal;
    })
  }
}
</script>

補(bǔ)充：

如果遇到watch:失效的問(wèn)題以下操作可以解決

watch:{
            data:{  //監(jiān)聽(tīng)的數(shù)據(jù)
                handler(val, oldName){
                     
                      console.log(val)
                  },
                  immediate:true, 
              },
        },

設(shè)置一個(gè)immediate為true就可以了