Problema: el componente principal inicia una solicitud al backend para obtener datos durante el montaje y luego pasa los datos obtenidos al componente secundario. El componente secundario desea obtener datos durante el montaje, pero no puede obtenerlos.
Ejemplo de código:
//父组件
<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>
Resultado de impresión: props.message está vacío, que es el valor inicial del mensaje del componente principal, pero los datos del componente secundario se pueden representar
Análisis de causa:
El orden de ejecución del ciclo de vida de los componentes padre-hijo es el siguiente:
Cargar proceso de renderizado de datos
- componente padre beforeCreate
- componente principal creado
- componente padre beforeMount
- Subcomponente beforeCreate
- Subcomponente creado
- Subcomponente beforeMount
- Subcomponente montado
- Componente principal montado
Actualizar datos de renderizado
- componente padre beforeUpdate
- Subcomponente beforeUpdate
- subcomponente actualizado
- componente principal actualizado
Destruir proceso de datos de componentes
- Componente padre beforeUnmount
- Subcomponente beforeUnmount
- Subcomponente desmontado
- componente principal desmontado
Del proceso de representación de datos de carga anterior, se puede ver que el componente montado del componente secundario se monta antes que el componente montado del componente principal, por lo que no se pueden obtener los datos obtenidos después de la solicitud asincrónica.
Solución
Método 1: use v-if para controlar el tiempo de procesamiento de los subcomponentes
//父组件
<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>
Método 2: use el reloj para monitorear los datos pasados por el componente principal
//子组件
<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>
