快捷導(dǎo)航

vue中父組件通過(guò)props向子組件傳遞數(shù)據(jù)但子組件接收不到解決辦法

更新時(shí)間：2024年01月09日 16:07:03 作者：儒雅的曹曹曹

大家都知道可以使用props將父組件的數(shù)據(jù)傳給子組件,下面這篇文章主要給大家介紹了關(guān)于vue中父組件通過(guò)props向子組件傳遞數(shù)據(jù)但子組件接收不到的解決辦法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

問(wèn)題：

父組件在掛載時(shí)向后端發(fā)起請(qǐng)求獲取數(shù)據(jù)，然后將獲取到的數(shù)據(jù)傳遞給子組件，子組件想要在掛載時(shí)獲取數(shù)據(jù)，獲取不到。

代碼示例：

//父組件
<template>
  <div>
    <HelloWorld :message="message"></HelloWorld>
  </div>
</template>

<script setup>
import HelloWorld from "./components/HelloWorld.vue";
import { onMounted, ref } from "vue";
const message = ref("1");
onMounted(() => {
//模擬異步請(qǐng)求
   setTimeout(() => {
    message.value = "1312";
  }, 0);
});
</script>
<style scoped></style>

//子組件
<template>
  <div>{{message}}</div>
</template>

<script setup>
import { onMounted, defineProps } from "vue";
const props = defineProps(["message"]);
onMounted(() => {
  console.log("傳遞過(guò)來(lái)的數(shù)據(jù)", props.message);
});
</script>

<style scoped></style>

打印結(jié)果：props.message為空，為父組件message的初始值，但是子組件數(shù)據(jù)能渲染出來(lái)

原因分析：

父子組件的生命周期執(zhí)行順序如下：

加載數(shù)據(jù)渲染過(guò)程

父組件beforeCreate
父組件created
父組件beforeMount
子組件beforeCreate
子組件created
子組件beforeMount
子組件mounted
父組件mounted

更新渲染數(shù)據(jù)

父組件beforeUpdate
子組件beforeUpdate
子組件updated
父組件updated

銷毀組件數(shù)據(jù)過(guò)程

父組件beforeUnmount
子組件beforeUnmount
子組件unmounted
父組件unmounted

由上述加載數(shù)據(jù)渲染過(guò)程可知子組件的mounted是先于父組件的mounted，所以獲取不到異步請(qǐng)求后獲取到的數(shù)據(jù)

解決方法

方法一：使用v-if控制子組件渲染的時(shí)機(jī)

//父組件
<template>
  <div>
    <HelloWorld :message="message" v-if="isShow"></HelloWorld>
  </div>
</template>

<script setup>
import HelloWorld from "./components/HelloWorld.vue";
import { onMounted, ref } from "vue";
const message = ref("1");
const isShow=ref(false);
onMounted(() => {
//模擬異步請(qǐng)求
   setTimeout(() => {
    message.value = "1312";
    isShow.value=true;//獲取數(shù)據(jù)成功，再讓子組件渲染
  }, 0);
});

</script>

<style scoped></style>

方法二：使用watch對(duì)父組件傳遞過(guò)來(lái)的數(shù)據(jù)進(jìn)行監(jiān)控

//子組件
<template>
  <div>{{message}}</div>
</template>

<script setup>
import { defineProps,watch} from "vue";
const props = defineProps(["message"]);
//監(jiān)聽(tīng)傳過(guò)來(lái)的數(shù)據(jù)
watch(()=>props.message,()=>{
 console.log("傳遞過(guò)來(lái)的數(shù)據(jù)", props.message);
})
</script>
<style scoped></style>

總結(jié)

到此這篇關(guān)于vue中父組件通過(guò)props向子組件傳遞數(shù)據(jù)但子組件接收不到解決辦法的文章就介紹到這了,更多相關(guān)ue父組件向子組件傳遞數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: