使用单文件组件方式创建表格组件，父组件传递学生信息（数组）给表格组件 序号班级姓名性别年龄1 1801张三男18 2 18o2李四女 19

以下是一个基本的单文件组件方式创建的表格组件，父组件传递了一个包含学生信息的数组给表格组件：

<template>
  <table>
    <thead>
      <tr>
        <th>序号</th>
        <th>班级</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(student, index) in students" :key="index">
        <td>{{ index + 1 }}</td>
        <td>{{ student.class }}</td>
        <td>{{ student.name }}</td>
        <td>{{ student.gender }}</td>
        <td>{{ student.age }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    students: Array
  }
}
</script>

在父组件中，可以这样传递学生信息数组给表格组件：

<template>
  <div>
    <table-component :students="students"></table-component>
  </div>
</template>

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

export default {
  components: {
    TableComponent
  },
  data() {
    return {
      students: [
        { class: '1801', name: '张三', gender: '男', age: 18 },
        { class: '1802', name: '李四', gender: '女', age: 19 }
      ]
    }
  }
}
</script>

这样就可以显示一个包含两个学生信息的表格了。