vue3父向子传数组

父组件可以通过props将数组传递给子组件。在父组件中，你可以使用冒号(:)绑定语法来将数组传递给子组件的props。下面是一个示例代码：

<template>
  <div>
    <Hello :DateList="ArrayList" />
  </div>
</template>

<script setup>
import { reactive } from "vue";
import Hello from "../components/HelloWorld.vue";

const ArrayList = reactive([
  { id: 1, name: "法外" },
  { id: 2, name: "狂徒" },
  { id: 3, name: "张三" },
]);
</script>

在子组件中，你可以使用props来接收父组件传递的数组。下面是一个示例代码：

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

<script setup>
import { ref, props } from "vue";

const DateList = props.DateList;
</script>

这样，父组件就成功将数组传递给了子组件，并在子组件中渲染了数组的内容。