Vue3父组件异步获取数据，子组件未接收到数据

业务场景

在Vue开发过程中，特别是刚上手不久的同学，很容易遇到，父组件异步获取数据传给子组件，但子组件却没有接收到的问题，如下图所示

主要原因在于，当父组件异步获取数据的同时，可能耗时较长，获取到数据再传给子组件时，子组件已经渲染完毕

解决方法

父组件异步获取数据：

const data = ref<string>('')
setTimeout(() => {
   
  data.value = '我是父组件异步获取的数据'
}, 2000)

传给子组件：

 <son :data="data" />

子组件通过defineProps接收，并通过watch监听父组件传过来的值：

const props = defineProps<{
   
  data: string
}>()

watch(
  () => props.data,  //监听
  () => {
   
    console.log(`子组件接收父组件传入的数据`, props.data)
  }