Problem: The parent component initiates a request to the backend to obtain data when mounting, and then passes the obtained data to the child component. The child component wants to obtain data when mounting, but cannot get it.
Code example:
//父组件
<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("传递过来的数据", props.message);
});
</script>
<style scoped></style>
Print result: props.message is empty, which is the initial value of the parent component message, but the child component data can be rendered
Cause Analysis:
The life cycle execution order of parent-child components is as follows:
Load data rendering process
- parent component beforeCreate
- parent component created
- parent component beforeMount
- Subcomponent beforeCreate
- Subcomponent created
- Subcomponent beforeMount
- Subcomponent mounted
- Parent component mounted
Update rendering data
- parent component beforeUpdate
- Subcomponent beforeUpdate
- subcomponentupdated
- parent componentupdated
Destroy component data process
- Parent component beforeUnmount
- Subcomponent beforeUnmount
- Subcomponent unmounted
- parent component unmounted
From the above loading data rendering process, it can be seen that the mounted component of the child component is mounted before the mounted component of the parent component, so the data obtained after the asynchronous request cannot be obtained
Solution
Method 1: Use v-if to control the timing of subcomponent rendering
//父组件
<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;//获取数据成功，再让子组件渲染
}, 0);
});
</script>
<style scoped></style>
Method 2: Use watch to monitor the data passed by the parent component
//子组件
<template>
<div>{
{
message}}</div>
</template>
<script setup>
import {
defineProps,watch} from "vue";
const props = defineProps(["message"]);
//监听传过来的数据
watch(()=>props.message,()=>{
console.log("传递过来的数据", props.message);
})
</script>
<style scoped></style>
