写一个vue组件：通过自定义事件实现Vuejs中子组件向父组件通信的使用方法：要求：通过下拉列表的形式选用从自己开始或结束的10名同学作为选项，选取多名学生。选取的学生会显示在下拉列表的下方，在所有选取学生的上面输出选取了多少名学生

下面是一个简单的实现：

<template>
  <div>
    <select v-model="selected" @change="updateSelected">
      <option disabled value="">请选择同学</option>
      <option v-for="student in students" :value="student">{{ student }}</option>
    </select>
    <div>
      <p>已选同学：</p>
      <ul>
        <li v-for="selectedStudent in selectedStudents" :key="selectedStudent">{{ selectedStudent }}</li>
      </ul>
      <p>已选 {{ selectedStudents.length }} 名同学</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      students: [
        '张三',
        '李四',
        '王五',
        '赵六',
        '钱七',
        '孙八',
        '周九',
        '吴十',
        '郑十一',
        '冯十二'
      ],
      selected: '',
      selectedStudents: []
    }
  },
  methods: {
    updateSelected() {
      if (this.selected && !this.selectedStudents.includes(this.selected)) {
        this.selectedStudents.push(this.selected)
        this.$emit('update:selected-students', this.selectedStudents) // 触发自定义事件
      }
      this.selected = ''
    }
  }
}
</script>

在父组件中可以通过监听子组件的自定义事件 `update:selected-students` 来获取选中的学生列表：

<template>
  <div>
    <student-select @update:selected-students="handleSelectedStudents"></student-select>
    <p>已选 {{ selectedStudents.length }} 名同学：{{ selectedStudents.join(', ') }}</p>
  </div>
</template>

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

export default {
  components: {
    StudentSelect
  },
  data() {
    return {
      selectedStudents: []
    }
  },
  methods: {
    handleSelectedStudents(selectedStudents) {
      this.selectedStudents = selectedStudents
    }
  }
}
</script>