创建vue新项目，清空app.vue，创建选择学生的子组件； 2. 在选择学生的子组件中，根据实验提供的excel文件，按照要求选择10名学生，页面效果如图所示。且这10名数据要求从app.vue父组件中使用props传入，定义自定义事件，将选择学生的信息逐个传给父组件。 3.在app.vue中，定义10名学生的数据，传给自定义组件标签，并定义接收学生选择信息，添加“删除”按钮，实现被选择学生的逐个删除。

好的，下面是具体的操作步骤：

1. 创建新的Vue项目

首先，在命令行中进入需要保存项目的文件夹，输入以下命令：

vue create my-project

其中，my-project是项目的名称，可以根据自己的需求进行修改。

2. 清空app.vue并创建选择学生的子组件

在项目文件夹中，找到src文件夹下的App.vue文件，将其清空。然后，创建一个新的组件，用于选择学生。在src文件夹下，创建一个名为SelectStudent.vue的文件，代码如下：

<template>
  <div>
    <h2>选择学生</h2>
    <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>{{ student.name }}</td>
          <td>{{ student.gender }}</td>
          <td>{{ student.age }}</td>
          <td>{{ student.score }}</td>
          <td>
            <input type="checkbox" :value="student" v-model="selectedStudents" @change="selectStudent">
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'SelectStudent',
  props: ['students'],
  data() {
    return {
      selectedStudents: []
    }
  },
  methods: {
    selectStudent() {
      this.$emit('selected', this.selectedStudents)
    }
  }
}
</script>

在这个组件中，我们首先定义了一个表格，用于展示学生的姓名、性别、年龄和成绩。每个学生的信息都是从父组件中通过props传入的。同时，我们还定义了一个复选框用于选择学生，并将选择的学生信息存储在selectedStudents数组中。当复选框状态发生改变时，我们触发selectStudent方法，并通过$emit方法将选中的学生信息逐个传给父组件。

3. 在app.vue中定义10名学生的数据并传给自定义组件标签

回到App.vue文件中，我们需要定义10名学生的数据，并将这些数据通过props传递给SelectStudent组件。代码如下：

<template>
  <div>
    <select-student :students="students" @selected="onStudentSelected"></select-student>
    <div v-for="(student, index) in selectedStudents" :key="index">
      <span>{{ student.name }}</span>
      <span>{{ student.gender }}</span>
      <span>{{ student.age }}</span>
      <span>{{ student.score }}</span>
      <button @click="removeStudent(index)">删除</button>
    </div>
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    SelectStudent
  },
  data() {
    return {
      students: [
        { name: '张三', gender: '男', age: 18, score: 80 },
        { name: '李四', gender: '女', age: 19, score: 85 },
        { name: '王五', gender: '男', age: 20, score: 90 },
        { name: '赵六', gender: '女', age: 21, score: 95 },
        { name: '孙七', gender: '男', age: 22, score: 100 },
        { name: '周八', gender: '女', age: 23, score: 80 },
        { name: '吴九', gender: '男', age: 24, score: 85 },
        { name: '郑十', gender: '女', age: 25, score: 90 },
        { name: '钱十一', gender: '男', age: 26, score: 95 },
        { name: '余十二', gender: '女', age: 27, score: 100 }
      ],
      selectedStudents: []
    }
  },
  methods: {
    onStudentSelected(students) {
      this.selectedStudents = students
    },
    removeStudent(index) {
      this.selectedStudents.splice(index, 1)
    }
  }
}
</script>

在这个文件中，我们首先将SelectStudent组件引入，并在模板中使用自定义标签的形式进行调用。同时，我们还定义了一个selectedStudents数组用于存储被选择的学生信息。当SelectStudent组件中的复选框被选中时，我们通过@selected自定义事件触发onStudentSelected方法，将选择的学生信息存储在selectedStudents数组中。在页面上展示被选中的学生信息时，我们使用v-for指令进行循环，并为每个学生信息添加一个“删除”按钮。当“删除”按钮被点击时，我们触发removeStudent方法，从selectedStudents数组中删除相应的学生信息。

至此，一个选择学生并逐个删除的Vue项目就完成了。