vue3父组件异步获取数据传给子组件的方法

可以通过以下方式将异步获取的数据传递给子组件：

1. 使用 props 将数据传递给子组件

父组件中，可以通过异步请求获取数据后，在渲染子组件时通过 props 将数据传递给子组件。示例代码：

<template>
  <div>
    <child-component :data="data"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      data: []
    }
  },
  async created() {
    const response = await fetch('https://api.example.com/data')
    this.data = await response.json()
  }
}
</script>

在子组件中，通过 props 接收传递过来的数据并进行渲染。示例代码：

<template>
  <ul>
    <li v-for="item in data" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      required: true
    }
  }
}
</script>

2. 使用 provide/inject 在父组件中提供数据，子组件中注入数据

在父组件中，可以通过 provide 方法提供数据，子组件中通过 inject 方法注入数据。示例代码：

// 父组件
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      data: []
    }
  },
  async created() {
    const response = await fetch('https://api.example.com/data')
    this.data = await response.json()
  },
  provide: {
    fetchData: this.fetchData // 将 fetchData 方法提供给子组件
  },
  methods: {
    fetchData() {
      return this.data
    }
  }
}
</script>

// 子组件
<template>
  <ul>
    <li v-for="item in dataList" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  inject: ['fetchData'], // 注入 fetchData 方法
  computed: {
    dataList() {
      return this.fetchData() // 获取父组件提供的数据
    }
  }
}
</script>