defineemits用于声明子组件可触发事件，支持数组语法（如['submit', 'cancel']）和对象语法（如{ submit: [data: { name: string; age: number }] }），后者提供类型安全与ide补全。
在 Vue 3 的 <script setup></script> 中，defineEmits 是声明子组件可触发事件的核心方式，它不需要导入，直接可用，且会自动参与类型推导和运行时校验。
基础写法：数组语法
适合简单场景，明确列出所有允许触发的事件名：
- 直接传入字符串数组，如
['submit', 'cancel', 'update:modelValue'] - 返回一个
emit函数，调用时需严格匹配数组中声明的事件名 - 参数不限制类型和数量（无类型保护）
示例：
const emit = defineEmits(['submit', 'cancel'])
触发时：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
emit('submit', { name: 'Alice', age: 28 })
推荐写法：对象语法（含类型安全）
配合 TypeScript 使用，能精准约束每个事件的参数个数、类型甚至名称，IDE 有自动补全，编译期报错更早。
- 事件名作为键，值为元组类型，描述参数列表，如
submit: [data: { name: string; age: number }] - 无参事件写成
close: [] - 支持多参数，如
change: [value: string, trigger: 'input' | 'blur']
示例：
const emit = defineEmits submit: [data: { name: string; age: number }];<br> cancel: [];<br> 'update:modelValue': [value: string];<br>()
注意事项与常见搭配
以下几点容易出错，需特别留意：
-
defineEmits只能在<script setup></script>顶层使用，不能放在函数或条件语句内 - 不能同时混用运行时声明（数组/对象）和类型声明（泛型），否则编译报错
- 若用了类型声明，Vue 会在开发模式下自动生成等效运行时校验，无需额外配置
- 父组件监听时，事件名写法与定义一致，比如
@submit或v-model:value对应'update:value'
配合 v-model 的典型用法
当子组件需要支持 v-model 时，本质是监听 update:xxx 事件：
- 定义
defineEmits(['update:modelValue'])或更严格的update:modelValue: [value: string] - 内部修改状态后调用
emit('update:modelValue', newValue) - 父组件即可写作
<myinput v-model="text"></myinput>，自动绑定modelValueprop 并监听更新事件
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
