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 =</