在 Vue 模板中传递原生事件对象和自定义参数，必须显式使用 $event，不可省略或改名；参数顺序需与方法签名严格一致；内联表达式和修饰符均兼容 $event。

在 Vue 模板中同时传递原生事件对象和自定义业务参数，关键就一点：显式写出 $event，不能省略，也不能写成 event 或其他名字。

必须用 $event，且要写在括号里

Vue 不会自动把事件对象塞进你的方法参数里——只有你主动写 $event，它才会被传进去。比如：

• ✅ 正确：@click="handle(item, $event)"
• ❌ 错误：@click="handle(item)"（拿不到事件对象）
• ❌ 错误：@click="handle(item, event)"（event 是未声明变量，会报错或为 undefined）

参数顺序要和方法签名严格对应

模板里怎么写，JS 方法就得怎么收。位置可以灵活，但顺序不能乱：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 模板：@click="onClick($event, id, type)" → 方法：onClick(e, id, type) { ... }
• 模板：@click="onClick(id, $event)" → 方法：onClick(id, e) { ... }

内联表达式里也能直接用 $event

适合简单操作，比如阻止默认行为、停止冒泡、读取按键值：

立即学习“前端免费学习笔记（深入）”；

• @click="$event.preventDefault(); isActive = true"
• @keyup.enter="$event.stopPropagation(); save()"
• @mousedown="$event.button === 0 && handleClick(item)"

修饰符和 $event 完全兼容

修饰符（如 .stop、.prevent）只是语法糖，不影响 $event 的传递：

• @click.stop="handle(item, $event) → 冒泡已阻止，$event 仍完整可用
• @submit.prevent="onSubmit($event, formData) → 提交被拦截，事件对象和表单数据都传进去了