自定义表格组件，父组件传递学生信息（数组）给表格组件

以下是一个示例代码，实现了一个简单的表格组件，父组件通过 props 传递一个包含学生信息的数组给表格组件。

<!-- 父组件 -->
<template>
  <div>
    <table-component :students="students"></table-component>
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    TableComponent,
  },
  data() {
    return {
      students: [
        { name: '张三', age: 18, gender: '男' },
        { name: '李四', age: 19, gender: '女' },
        { name: '王五', age: 20, gender: '男' },
      ],
    };
  },
};
</script>

<!-- 表格组件 -->
<template>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="student in students" :key="student.name">
        <td>{{ student.name }}</td>
        <td>{{ student.age }}</td>
        <td>{{ student.gender }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'TableComponent',
  props: {
    students: {
      type: Array,
      required: true,
    },
  },
};
</script>

在父组件中，我们将 `students` 数组作为 props 传递给表格组件，在表格组件中，我们使用 `v-for` 循环遍历 `students` 数组，生成表格的行数据。由于 `students` 是必需的 props，我们在表格组件中使用了 `required: true` 来确保父组件传递了正确的参数。