Vue 3 中 defineEmits 支持一次性声明多个事件名（如 ['save', 'cancel']），再按需调用 emit('event', payload) 触发任意单个事件；支持数组或对象形式声明，后者可校验参数并提供 TS 类型提示；父组件用 @event 监听。

Vue 3 中用 defineEmits 派发多个自定义事件，核心是**一次性声明多个事件名，再按需调用 emit() 触发任意一个或多个**。它不是“一次触发多个事件”，而是让组件具备触发多种事件的能力，由逻辑决定何时发哪个。

声明多个事件：数组写法最常用

在 <script setup></script> 顶层直接使用 defineEmits，传入字符串数组，每个元素是一个事件名：

• const emit = defineEmits(['save', 'cancel', 'delete', 'update'])
• 这样组件就明确支持这四个自定义事件，Vue 编译器能校验后续 emit 调用是否合法
• 事件名建议用小写+短横线（如 user-created）或驼峰（如 userCreated），保持项目统一

触发不同事件：每次只发一个，但可多次调用

声明后得到的 emit 是个函数，调用时指定事件名和可选参数。多个事件互不干扰，按业务逻辑分别触发：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• emit('save', { id: 1, name: '张三' }) —— 保存时发 save
• emit('cancel') —— 取消时不传参
• emit('delete', 1001, '确认删除？') —— 支持多参数，第二个起全是 payload
• 可以在同一个点击处理函数里连续触发多个事件（少见但合法）：
  emit('save', data); emit('notify')

进阶：用对象形式做参数验证（推荐搭配 TypeScript）

当某些事件对参数有强要求时，用对象声明可内置校验逻辑，提升健壮性：

• const emit = defineEmits({<br>  submit: (form) => form?.email && form?.password,<br>  reset: () => true,<br>  error: (msg) => typeof msg === 'string'<br>})

• 触发 emit('submit', { email: 'a@b.com' }) 时，验证失败会警告但不阻断（开发环境）
• TypeScript 下还能获得精准类型提示，比如 submit 的参数自动推导为 { email: string; password: string }

父组件监听：用 @ 绑定对应事件名即可

父组件不需要额外配置，直接在子组件标签上用 @事件名 监听，多个事件并行监听互不影响：

• 每个 handler 函数接收对应事件传递的参数，顺序和 emit 调用一致
• 事件名大小写敏感，必须和 defineEmits 声明的一致

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！