defineEmit的使用与泛型

在Vue 3中，`defineProps`用于声明组件接受的属性（props），而`defineEmits`则用于声明组件产生的事件（emits）。当你使用`<script setup>`时，这两个API允许你在组件内部管理它们。

**使用`defineProps`示例**[^1]:

<script setup>
const props = defineProps({
  foo: { type: String } // 声明foo属性，其类型为String
})
</script>

<!-- 使用props -->
<p>{{ props.foo }}</p>

**使用`defineEmits`示例**[^2]:

<script setup>
const emit = defineEmits(['sendFatherData']) // 定义可以向父组件发送的数据事件
emit('sendFatherData', { data: 'fromChild' }) // 触发事件并传递数据
</script>

**关于`defineEmits`的泛型**:
在Vue 3中，`defineEmits`并不直接支持泛型，因为它是用于声明事件名称的。如果你想在类型安全的方式下定义可能有不同类型的事件，可以在组件的接口文件（`.d.ts`）中自定义一个类型来描述这些可能的事件：

// components/MyComponent.vue.d.ts
interface MyComponentEmits {
  sendFatherData(data: any): void
}

export default {
  emits: MyComponentEmits,
}

这样，在`setup`中使用`emit`时，类型检查器会知道预期的参数类型：

<script setup lang="ts">
const emit = useEmits<MyComponentEmits>('sendFatherData')
emit('sendFatherData', { someData: 'example' }) // 类型安全
</script>