Problème : le composant parent initie une demande au serveur principal pour obtenir des données lors du montage, puis transmet les données obtenues au composant enfant. Le composant enfant souhaite obtenir des données lors du montage, mais ne peut pas les obtenir.
Exemple de code :
//父组件
<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>
Résultat d'impression : props.message est vide, ce qui correspond à la valeur initiale du message du composant parent, mais les données du composant enfant peuvent être rendues
Analyse des causes :
L'ordre d'exécution du cycle de vie des composants parent-enfant est le suivant :
Charger le processus de rendu des données
- composant parent beforeCreate
- composant parent créé
- composant parent beforeMount
- Sous-composant avantCréer
- Sous-composant créé
- Sous-composant avantMount
- Sous-composant monté
- Composant parent monté
Mettre à jour les données de rendu
- composant parent avant la mise à jour
- Sous-composant avant la mise à jour
- sous-composant mis à jour
- composant parent mis à jour
Détruire le processus de données du composant
- Composant parent beforeUnmount
- Sous-composant avant le démontage
- Sous-composant non monté
- composant parent non monté
À partir du processus de rendu des données de chargement ci-dessus, on peut voir que le composant monté du composant enfant est monté avant le composant monté du composant parent, de sorte que les données obtenues après la requête asynchrone ne peuvent pas être obtenues.
Solution
Méthode 1 : Utiliser v-if pour contrôler la synchronisation du rendu des sous-composants
//父组件
<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éthode 2 : Utiliser watch pour surveiller les données transmises par le composant parent
//子组件
<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>
