Vue 3子组件emit传多参数有四种方式：1. 直接传多个值（顺序严格对应）；2. 封装成对象（推荐字段多或需扩展）；3. 混合传参（子组件发业务参数，父模板补上下文）；4. v-model仅适用于单值同步。
Vue 3 中子组件通过 emit 向父组件传多个参数，核心是“调用方式”和“接收方式”严格对齐。不强制打包或拆解，关键看场景是否稳定、字段是否易变、上下文是否需要额外信息。
直接传多个值（适合固定结构）
子组件触发时按顺序写参数，父组件方法形参一一对应，顺序不能错：
- 子组件：
emits('update-user', id, name, role) - 父组件模板：
<user-form @update-user="onUpdate"></user-form>（不加括号！） - 父组件方法：
function onUpdate(id, name, role) { /* 三个值按序接收 */ }
这种写法调试直观、语义明确，适合参数少（2–4个）、含义稳定、未来不太增减字段的场景。
封装成对象传递（推荐用于字段多或需扩展）
把多个参数合并为一个对象，避免顺序依赖，也方便 TypeScript 类型定义和文档说明：
立即学习“前端免费学习笔记（深入）”；
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 子组件：
emits('submit-form', { userId: 101, action: 'edit', timestamp: Date.now() }) - 父组件方法：
function onSubmit(payload) { console.log(payload.userId, payload.action) } - 配合
defineEmits做运行时校验：defineEmits({ 'submit-form': (p) => p && typeof p === 'object' })
对象传参天然支持可选字段、嵌套结构，后续加字段不影响原有接收逻辑，维护成本更低。
父子上下文混合传参（常用于列表项操作）
当父组件需要知道“哪个位置”或“哪条数据”触发了事件，可在模板中显式补上索引、ID 等上下文信息：
- 子组件只发业务参数：
emits('delete-item', itemId) - 父组件模板：
<item v-for="(item, i) in list" :key="item.id" @delete-item="onDelete($event, i)"></item> - 父组件方法：
function onDelete(itemId, index) { list.splice(index, 1) }
这里 $event 自动接收子组件 emit 的第一个参数，其余形参接收模板里显式写的值，职责清晰、不易混淆。
用 v-model 实现单值双向同步（语法糖，非多参）
如果目标只是同步一个值（比如输入框内容），优先走 v-model 规范，而不是手动 emit 多个参数：
- 子组件：
emits('update:modelValue'); emits('update:modelValue', newValue) - 父组件：
<my-input v-model="searchText"></my-input> - 等价于：
<my-input :model-value="searchText" @update:model-value="val => searchText = val"></my-input>
注意：v-model 默认只处理单值，不适用于真正需要多个参数的场景；如需多值绑定，应自定义 model 名（如 v-model:filters）并配套 update:filters 事件。
