Los componentes padre-hijo de Vue3 pasan el paso de valor en el punto de boxes: el componente padre obtiene datos de forma asincrónica y el componente hijo recibe los datos pero no los representa.

El componente padre-hijo de Vue pasa el valor al pisar el punto de boxes: cuando el componente padre obtiene datos de forma asincrónica

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

1. El componente principal obtiene datos de forma asincrónica
注意：本文写法为vue3
Pseudocódigo:

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

2. Subcomponentes

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

3. Solución (el punto clave es usar monitoreo de vigilancia) cuando el valor obtenido de forma asincrónica por el componente principal se monitorea y luego se usa en el componente secundario

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

Lo anterior resuelve este problema. La razón principal es que los datos obtenidos por el componente principal son asincrónicos. Cuando se pasan al componente secundario, es probable que el componente secundario ya se haya renderizado, por lo que aunque el componente secundario haya recibido el valor, los datos no han sido renderizados. ! Utilice el reloj para controlar el valor y luego realizar la operación.