vue子组件向父组件传多参有四种方式：①直接传多个参数，顺序严格对应；②打包成对象，避免顺序依赖且易扩展；③父子同时传参，$event接子参、模板显式传父参；④配合v-model实现单值双向绑定。
在 Vue 中，子组件向父组件传递多个参数，核心是让 emit 的调用方式和父组件的接收方式严格匹配。Vue 不限制传参个数，但必须注意语法细节和类型一致性，否则参数会丢失或错位。
直接传多个参数（最简明、推荐）
子组件触发事件时，依次写入多个值；父组件方法形参一一对应，顺序不能错：
- 子组件：
emit('update', id, name, status) - 父组件模板：
<child></child>（不加括号！） - 父组件方法：
handleUpdate(id, name, status) { console.log(id, name, status) }
这种方式语义清晰、调试直观，适合参数结构稳定、数量固定（如 2–4 个）的场景。
打包成对象再传（结构化、易扩展）
当参数字段多、含义明确，或未来可能增减字段时，统一用一个对象封装更安全：
- 子组件：
emit('submit', { id: 123, title: '编辑完成', timestamp: Date.now() }) - 父组件方法：
handleSubmit(payload) { console.log(payload.id, payload.title) }
好处是避免参数顺序依赖，也方便 TypeScript 类型推导和文档注释。Vue 3 的 defineEmits 对象写法还能做运行时校验：
'submit': (payload: { id: number; title: string }) => true
})
父子同时传参（区分上下文）
常见于 v-for 渲染列表项，父组件需知道“是第几项”触发了事件：
- 子组件：
emit('remove', itemId) - 父组件模板：
<item-list v-for="(item, i) in list" :key="item.id" i></item-list> - 父组件方法：
onRemove(itemId, index) { list.splice(index, 1) }
这里 $event 自动接收子组件 emit 的第一个参数，后续形参接收父模板中显式写的值，逻辑分离干净。
配合 v-model 实现双向绑定（约定优先）
若子组件要支持 v-model，必须遵守 Vue 的命名规范：
- 声明事件为
update:modelValue（或自定义名如update:searchText） - 子组件内触发：
emit('update:modelValue', newValue) - 父组件使用：
<my-input v-model="inputVal"></my-input>等价于<my-input :model-value="inputVal"> inputVal = val"></my-input>
这种写法把“传参”隐含在响应式机制里，无需手动处理多个值，专用于单值同步场景。
