Vue3父子组件传值踩坑点之——父组件异步获取数据，子组件接收到数据但没有渲染

Vue父子组件传值踩坑点——当父组件异步获取数据时

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

1.父组件异步获取数据
注意：本文写法为vue3
伪代码：

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

2.子组件

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

3.解决方法（关键点使用watch监听）当监听到了父组件异步获取到的值再在子组件中使用

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

以上就解决了这个问题，主要原因就在于父组件为异步获取的数据，当传给子组件时，子组件很有可能已经渲染完毕，因而虽然子组件接收到了值，但数据却并没有渲染出！采用watch监听到了值再去进行操作即可。