【Vue】子组件向父组件传值的几种方式

1.v-on事件的方式

在组件的模板表达式中，可以直接使用 $emit 方法触发自定义事件 (例如：在 v-on 的处理函数中)：

<!-- 子组件ChildComponent.vue -->
<button @click="$emit('someEvent')">click me</button>

父组件可以通过 v-on (缩写为 @) 来监听事件：

<!-- 父组件App.vue -->
<ChildComponent @some-event="callback" />

tips：some-event和someEvent会自动匹配。
HTML 标签和属性名称是不分大小写的，所以浏览器会把任何大写的字符解释为小写。这意味着当你使用 DOM 内的模板时，无论是 PascalCase 形式的组件名称、camelCase 形式的 prop 名称还是 v-on 的事件名称，都需要转换为相应等价的 kebab-case (短横线连字符) 形式。
也就是说
<check-box-group @checkbox-confirm="doSomeThing"></check-box-group>
与
<CheckBoxGroup @checkboxConfirm="doSomeThing"></CheckBoxGroup>
两种写法是等价的
详细内容参见官方文档：组件基础

有了上面的基础，下面的例子就不难理解了。
这个例子想实现在子组件中checkbox选择的值传递给父组件使用

子组件CheckBoxGroup.vue

<script setup lang="ts">
import {
    ref } from 'vue';
const students = ref(['jack','john','bob','mike'])
const selectedNames =