事件
在 Vue 3 中，事件的使用方式相较于 Vue 2 略有改变，主要集中在使用 emits 选项和 $emit 方法上。以下是关于 Vue 3 中事件与 $emit 的一些基本概念和使用方法：
1. 监听事件（v-on）:
在模板中，使用 v-on 指令来监听事件，并在触发时执行相应的方法。
<template> <button @click="handleClick">Click me</button> </template> <script setup> const handleClick = () => { console.log('Button clicked!'); }; </script>
2. 触发自定义事件（$emit）:
在子组件中，使用 $emit 方法触发自定义事件，将数据传递给父组件。
<template> <button @click="handleClick">Click me</button> </template> <script setup> const { emit } = defineEmits(['foo']); const handleClick = () => { // 触发自定义事件，并传递数据 emit('foo', 'Hello from child!'); }; </script>
3. 在父组件中监听自定义事件:
在父组件中，使用 v-on 指令来监听子组件触发的自定义事件。
<template> <child-component @custom-event="handleCustomEvent"></child-component> </template> <script setup> import ChildComponent from './ChildComponent.vue'; const handleCustomEvent = (data) => { console.log('Received custom event:', data); }; </script>
4. 使用 emits 选项声明事件:
在 Vue 3 中，可以使用 emits 选项来声明子组件能够触发的事件，以便提供更好的类型支持和提示。
<script> import { defineComponent } from 'vue'; export default defineComponent({ emits: ['custom-event'], methods: { handleClick() { // 触发声明的自定义事件，并传递数据 this.$emit('custom-event', 'Hello from child!'); } } }); </script>
通过使用 emits，你可以明确指定子组件可以触发的自定义事件，这在 TypeScript 等类型系统中尤其有帮助。
5. 参数化事件（$emit 参数）:
你可以在触发自定义事件时传递多个参数。也可以将子组件定义的数据传到父组件，比较灵活。
<script setup> const { emit } = defineEmits(['custom-event']); const handleClick = () => { // 触发声明的自定义事件，并传递数据 emit('custom-event', 'Hello from child!'); }; </script>
在父组件中，通过监听事件，你可以接收到所有传递的参数：
<template> <child-component @custom-event="onCustomEvent"></child-component> </template> <script setup> import ChildComponent from './ChildComponent.vue'; const onCustomEvent = (...args) => { console.log('Received custom event with parameters:', args); }; </script>
defineEmits
在 Vue 3 中，defineEmits 函数用于定义一个组件可以触发的事件，主要用于提供 TypeScript 的类型支持。这个函数通常与 defineComponent 一起使用。
以下是一个简单的例子，演示如何使用 defineEmits：
<script setup> import { defineEmits } from 'vue'; const emits = defineEmits(['event-one', 'event-two']); const handleClickOne = () => { emits('event-one', 'Data for event one'); }; const handleClickTwo = () => { emits('event-two', 'Data for event two'); }; </script>
事件校验
在 Vue 3 中，如果想要在组件内对 emit 方法传递的事件进行类型校验，可以使用 defineEmits 函数。defineEmits 不仅用于声明组件可以触发的事件，还可以用于提供类型信息，以便在 emit 时进行类型校验。
以下是一个示例，演示如何使用 defineEmits 进行事件校验：
<!-- ChildComponent.vue --> <template> <button @click="sendData">Send Data to Parent</button> </template> <script setup lang="ts"> import { defineEmits, ref } from 'vue'; const emits = defineEmits<{ 'child-event': (data: string) => void; }>(); const dataToSend = ref('Data from child'); const sendData = () => { // TypeScript 类型检查 if (isValidData(dataToSend.value)) { // 触发自定义事件，并传递数据 emits('child-event', dataToSend.value); } else { console.error('Invalid data. Not sending the event.'); } }; const isValidData = (data: string): boolean => { // 实际校验逻辑 return typeof data === 'string' && data.length > 0; }; </script>
在例子中使用 defineEmits 函数，并在泛型参数中提供了事件的声明，包括事件名称 'child-event' 和它所传递的参数类型 (data: string) => void。这样，在使用 emits 函数触发事件时，传递的参数会被 TypeScript 编译器进行类型检查。
