vue3子组件接收父组件的数组

在 Vue 3 中，可以通过 props 来实现子组件接收父组件的数组数据。

首先，在父组件中，通过 props 配置来定义要传递给子组件的数组数据。例如，假设要将名为 `list` 的数组传递给子组件：

<template>
  <div>
    <ChildComponent :list="list" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      list: ['item1', 'item2', 'item3']
    };
  }
}
</script>

然后，在子组件中，通过 props 来接收父组件传递的数组数据。可以使用 `props` 选项来定义需要接收的属性名和类型。例如，假设子组件名为 `ChildComponent`：

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

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

现在，子组件就可以通过 `list` 属性来接收父组件传递的数组数据，并在模板中进行遍历渲染。

这样，父组件的数组数据就能够传递给子组件进行使用了。