触发与监听事件
在组件的模板表达式中，可以直接使用 $emit 方法触发自定义事件 (例如：在 v-on 的处理函数中)：
<!-- MyComponent --> <button @click="$emit('someEvent')">click me</button>
父组件可以通过 v-on (缩写为 @) 来监听事件：
<MyComponent @some-event="callback" />
同样，组件的事件监听器也支持 .once 修饰符：
<MyComponent @some-event.once="callback" />
事件参数
有时候我们会需要在触发事件时附带一个特定的值。举例来说，我们想要 <BlogPost> 组件来管理文本会缩放得多大。在这个场景下，我们可以给 $emit 提供一个额外的参数：
<button @click="$emit('increaseBy', 1)"> Increase by 1 </button>
然后我们在父组件中监听事件，我们可以先简单写一个内联的箭头函数作为监听器，此函数会接收到事件附带的参数：
<MyButton @increase-by="(n) => count += n" /> <MyButton @increase-by="increaseCount" />
function increaseCount(n) { count.value += n }
声明触发的事件
组件可以显式地通过 defineEmits() 宏来声明它要触发的事件：
<script setup> defineEmits(['inFocus', 'submit']) </script>
我们在 <template> 中使用的 $emit 方法不能在组件的 <script setup> 部分中使用，但 defineEmits() 会返回一个相同作用的函数供我们使用：
<script setup> const emit = defineEmits(['inFocus', 'submit']) function buttonClick() { emit('submit') } </script>
defineEmits() 宏不能在子函数中使用。如上所示，它必须直接放置在 <script setup> 的顶级作用域下。
如果你显式地使用了 setup 函数而不是 <script setup>，则事件需要通过 emits 选项来定义，emit 函数也被暴露在 setup() 的上下文对象上：
export default { emits: ['inFocus', 'submit'], setup(props, ctx) { ctx.emit('submit') } }
export default { emits: ['inFocus', 'submit'], setup(props, { emit }) { emit('submit') } }
这个 emits 选项和 defineEmits() 宏还支持对象语法。通过 TypeScript 为参数指定类型，它允许我们对触发事件的参数进行验证：
<script setup lang="ts"> const emit = defineEmits({ submit(payload: { email: string, password: string }) { // 通过返回值为 `true` 还是为 `false` 来判断 // 验证是否通过 } }) </script>
事件校验
和对 props 添加类型校验的方式类似，所有触发的事件也可以使用对象形式来描述。
要为事件添加校验，那么事件可以被赋值为一个函数，接受的参数就是抛出事件时传入 emit 的内容，返回一个布尔值来表明事件是否合法。
<script setup> const emit = defineEmits({ // 没有校验 click: null, // 校验 submit 事件 submit: ({ email, password }) => { if (email && password) { return true } else { console.warn('Invalid submit event payload!') return false } } }) function submitForm(email, password) { emit('submit', { email, password }) } </script>
