使用 defineEmits 声明事件并用 emit 触发：数组声明事件名，对象声明带类型校验；emit 按序传参，事件名须短横线格式；必须大小写及连字符完全一致，且不可在异步前触发。
![emit 语法糖怎么在 `<script setup>` 中简洁地定义和触发自定义事件">` 中简洁地定义和触发自定义事件"></p>
<p>在 `<script setup>` 中用语法糖定义和触发自定义事件，核心就两步：先用 `defineEmits` 声明事件列表，再用返回的 `emit` 函数触发。写法简洁、类型友好，且 Vue 会自动做校验。</script></p>
<h3>怎么声明事件（defineEmits）</h3>
<p>直接调用 `defineEmits`，传入事件名数组或对象：</p>
<ul>
<li>数组写法（最常用）：<code>const emit = defineEmits(['submit-form', 'cancel-edit'])</code>
</li>
<li>对象写法（带类型提示）：<code>const emit = defineEmits({ 'submit-form': (data: FormData) => true })</code> —— 这样 TS 能检查传参是否合规</li>
<li>不声明就调用会报错：TypeScript 提示“Cannot find name 'emit'”，IDE 也没补全，运行时也可能静默失败</li>
</ul>
<h3>怎么触发事件（emit）</h3>
<p>声明后得到的 `emit` 是个函数，直接调用即可：</p><div class=](https://img.php.cn/upload/article/001/242/473/179004458754882.jpg)
Emit 语法糖怎么在 `` 中简洁地定义和触发自定义事件
小雪酱_4615
发布时间：2026-09-22 10:36:26
|888人浏览过
|来源于php中文网
原创
- 只发事件名：
emit('submit-form') - 带一个参数：
emit('submit-form', { title: 'Hello' }) - 带多个参数：
emit('item-click', id, type, meta)，父组件监听函数会按顺序接收到全部参数 - 事件名必须用短横线格式（如
user-delete），不能用驼峰（userDelete）——HTML 模板里不区分大小写，驼峰会失效
常见搭配写法（模板里更干净）
配合模板使用时，推荐把逻辑收进函数，避免内联过长：
- 子组件模板：
<button @click="handleSubmit">提交</button> - 脚本中：
const handleSubmit = () => emit('submit-form', formData) - 这样比
@click="$emit('submit-form', formData)"更易读、可复用、方便加校验或异步处理
注意几个硬性细节
这些不是建议，是必须遵守的规则：
-
事件名大小写+连字符必须完全一致：子组件 emit('user-update')，父组件就得写
@user-update，写成@userUpdate或@user_update都不触发 -
别在异步操作前 emit：比如
await save(); emit('saved')是对的，emit('saved'); await save()就可能传空值 - defineEmits 不需要从 vue 导入——它是编译时宏，直接用就行
相关文章
Vue 3 中使用 ref 时常见的空值报错（null）怎么优雅排查与处理
Vue 3 中怎么用 watchEffect 实现长文本阅读进度的自动埋点上报
Vue 3 单文件组件怎么使用自定义指令（v-focus 等）增强 DOM 交互
Vue 3 模板语法中怎么给组件绑定带有修饰符的动态属性
Vue 3 中用 ref 定义的数组直接通过索引修改元素会触发视图更新吗
相关标签:
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
相关专题
python是前端还是后端
Python属于前端也属于后端，其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容，供大家免费下载体验。
2043
2023.08.11
前端如何实现即时通讯
实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍：1、WebSocket，它可以在客户端和服务器之间建立持久连接，实现实时的双向通信，前端可以使用 WebSocket API来创建WebSocket连接，并通过发送和接收消息来实现即时通讯；2、Long Polling，是一种模拟实时通信的技术等等。
4363
2023.10.09
前端外包工作内容有哪些
前端外包工作内容包括：1. 网站和应用程序开发；2. 用户界面和交互设计；3. 用户体验优化；4. 设计和视觉开发；5. 跨浏览器兼容性；6. 性能优化；7. 维护和更新；8. 项目管理和沟通。想了解更多前端的相关内容，可以阅读本专题下面的文章。
683
2024.05.22
vue2.0和3.0区别
vue2.0和3.0区别：vue2的响应式原理是利⽤“Object.defineProperty()”对数据进⾏劫持结合发布订阅模式的⽅式来实现，vue3中使⽤了es6的proxy API对数据代理，实现对数据的监控。本专题为大家提供vue2.0和3.0区别的相关的文章、下载、课程内容，供大家免费下载体验。
1594
2023.07.17
vue3的生命周期有哪些
vue3的生命周期：1、beforecreate；2、created；3、beforemount；4、mounted；5、beforeupdate；6、updated；7、beforedestroy；8、destroyed；9、activated；10、deactivated等等。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。
11602
2024.02.23
Vue3组合式API与组件开发实战
本专题讲解 Vue 3 组合式 API 的核心概念与应用技巧，深入分析响应式系统、生命周期管理、组件设计与复用策略。通过完整项目案例，指导前端开发者实现高性能、结构清晰的 Vue 应用，提升开发效率与代码可维护性。
256
2026.02.10
Vibeknow在线使用入口合集
本专题汇总了Vibeknow在线创作视频的官方入口及网页版使用教程，涵盖PPT、PDF、Word等文档一键转讲解视频的核心操作，并整理了免费版水印规则与手机端浏览器访问指南，助你快速将知识内容视频化。
0
2026.09.21
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章
