vue3父组件获取子组件的异步数据

在Vue3中，可以通过`$emit`和`$attrs`来实现父组件获取子组件的异步数据。具体步骤如下：

1.在子组件中，使用`$emit`将异步数据传递给父组件：

<template>
  <div>
    <!-- 异步获取数据并将其传递给父组件 -->
    <button @click="getData">获取数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    async getData() {
      const data = await fetchData() // 异步获取数据
      this.$emit('data-loaded', data) // 将数据传递给父组件
    }
  }
}
</script>

2.在父组件中，使用`$attrs`来监听子组件的事件，并获取异步数据：

<template>
  <div>
    <child-component @data-loaded="handleDataLoaded" />
    <div v-if="data">异步数据：{{ data }}</div>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      data: null
    }
  },
  methods: {
    handleDataLoaded(data) {
      this.data = data // 获取异步数据
    }
  }
}
</script>

在上述代码中，父组件通过`$attrs`监听子组件的`data-loaded`事件，并在事件处理函数`handleDataLoaded`中获取异步数据并将其赋值给`data`属性。当`data`属性有值时，就会渲染出异步数据。