Valor de transferência do componente pai-filho Vue3 pisando no pit point - o componente pai obtém dados de forma assíncrona, o componente filho recebe os dados, mas não renderiza

Valor de transferência do componente pai-filho Vue pisando no pit point - quando o componente pai obtém dados de forma assíncrona

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

1. O componente pai obtém dados de forma assíncrona
注意：本文写法为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. Solução (o ponto chave é usar monitoramento de observação) quando o valor obtido de forma assíncrona pelo componente pai é monitorado e então usado no componente filho

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

O acima resolve este problema. O principal motivo é que os dados obtidos pelo componente pai são assíncronos. Quando são passados ​​​​para o componente filho, é provável que o componente filho tenha sido renderizado, portanto, embora o componente filho tenha recebido o valor, os dados não foram renderizados. ! Use o relógio para monitorar o valor e então realizar a operação.