defineEmits 是 Vue 3 中声明子组件可触发事件的必需机制，支持数组（如 ['updateCount', 'submitForm']）和泛型（如 { 'update:modelValue': (val: any) => void }）两种写法，确保类型安全与 IDE 提示；事件需通过返回的 emit 函数调用，命名推荐 update:xxx 以兼容 v-model。
在 Vue 3 的 `<script setup>` 中，`defineEmits` 是声明子组件“能对外发出哪些事件”的标准方式。它不是可选的装饰，而是推荐的显式声明机制——既防止拼写错误，又支持 TypeScript 类型检查，还能让 IDE 自动提示、调试时更清晰。</script>
声明事件：用数组或泛型两种写法
最基础也最常用的是数组语法，直接列出所有可能触发的事件名：
-
数组写法（适合简单场景）：
const emit = defineEmits(['updateCount', 'submitForm', 'cancel'])—— 声明后，子组件只能合法触发这三个事件名，其他名字调用会静默失败（开发模式下有警告） -
TS 泛型写法（推荐用于中大型项目）：
const emit = defineEmits void; submitForm: (data: FormData) => void }>()—— 不仅约束事件名，还精确约束每个事件的参数类型，传错类型时 TypeScript 直接报错
触发事件：用 emit 函数传参
声明后拿到的 emit 是一个函数，调用时第一个参数是事件名，后续参数就是传递给父组件的数据：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 无参事件：
emit('cancel') - 单参事件：
emit('updateCount', 42) - 多参或对象参数：
emit('submitForm', { username: 'Alice', email: 'a@example.com' }) - 注意：事件名必须和
defineEmits中声明的一致，大小写、连字符都不能错
命名规范：优先用 update:xxx 格式
Vue 官方建议对“更新某个 prop”的事件使用 update:xxx 命名，这样能和 v-model 机制自动对接：
立即学习“前端免费学习笔记（深入）”；
- 比如子组件接收
modelValue，想通知父组件更新，就声明['update:modelValue']，然后调用emit('update:modelValue', newValue) - 父组件就能直接写
<myinput v-model="text"></myinput>，无需额外绑定@update:modelValue - 同理，若 prop 叫
title，对应事件应为update:title
常见误区提醒
避免这几个典型错误：
- 在模板里写
@click="$emit('xxx')"——$emit是实例方法，只在 Options API 或非 setup 环境可用；<script setup></script>中必须用defineEmits声明后再调用返回的emit函数 - 漏写
defineEmits就直接调用emit—— 这会导致运行时报错emit is not defined - 事件名写成
onUpdate或handleUpdate—— 这类命名容易和原生事件或内部方法混淆，应坚持用小写字母+短横线（kebab-case）风格，如confirm-delete
