Valeur de transfert du composant parent-enfant Vue3 en avançant sur le point de fosse - le composant parent obtient les données de manière asynchrone, le composant enfant reçoit les données mais ne les restitue pas

Composant parent-enfant Vue transmettant la valeur en marchant sur le point de fosse - lorsque le composant parent obtient des données de manière asynchrone

在新手开发Vue项目时，很有可能会遇到这个问题，因此笔者在此做个简单记录，以供今后新手避坑

1. Le composant parent obtient les données de manière asynchrone.
注意：本文写法为vue3
Pseudocode :

const id=ref<number>(1)
const project=ref<string>()
//注意getProjecInfo为API接口
onMounted(async () => {
    
    
  project.value = await getProjecInfo(id.value)
  }
  ）

2. Sous-composants

//子组件通过
const props = defineProps<{
    
    
  getProjecInfo: string   //子组件接收
}>()
//解构赋值
const {
    
     getProjecInfo} = toRefs(props)

3. Solution (le point clé est d'utiliser la surveillance de surveillance) lorsque la valeur obtenue de manière asynchrone par le composant parent est surveillée puis utilisée dans le composant enfant

watch(
  () => getProjecInfo.value,
  () => {
    
    
    console.log(getProjecInfo.value)
    //你的逻辑操作，比如将值赋值给你子组件的变量中
    .......
  },
  {
    
     deep: true }
)

Ce qui précède résout ce problème. La raison principale est que les données obtenues par le composant parent sont asynchrones. Lorsqu'elles sont transmises au composant enfant, le composant enfant est susceptible d'avoir été rendu, donc bien que le composant enfant ait reçu la valeur, les données n'ont pas été rendues. ! Utilisez la montre pour surveiller la valeur, puis effectuez l'opération.