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

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

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

問題：

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

代碼示例：

//父組件
<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(() => {
//模擬異步請求
   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("傳遞過來的數(shù)據", props.message);
});
</script>

<style scoped></style>

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

原因分析：

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

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

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

更新渲染數(shù)據

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

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

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

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

解決方法

方法一：使用v-if控制子組件渲染的時機

//父組件
<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(() => {
//模擬異步請求
   setTimeout(() => {
    message.value = "1312";
    isShow.value=true;//獲取數(shù)據成功，再讓子組件渲染
  }, 0);
});

</script>

<style scoped></style>

方法二：使用watch對父組件傳遞過來的數(shù)據進行監(jiān)控

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

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