vue 3 内联事件处理器中必须显式写 $event 才能获取原生事件对象，正确写法为 @click="handle(item, $event)"；参数顺序需与方法签名一致；可直接用 $event 调用其属性或方法，且修饰符与 $event 可共存。

在 Vue 3 内联事件处理器中，同时传自定义参数和原生事件对象，核心是显式写出 $event —— 它不是自动注入的，必须手动写进括号里。

check-vue-style

检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。

下载

写法必须带 $event，不能省略

错误写法：@click="handle(item)" 或 @click="handle(item, event)"（event 未声明，会报错或 undefined）
正确写法：@click="handle(item, $event)"
Vue 模板中只有 $event 这个特殊变量代表原生 DOM 事件，其他名字都不识别。

参数顺序要和方法签名一致

比如模板里写：@click="onItemClick($event, id, status)"
那么方法就得按这个顺序接收：
const onItemClick = (e, id, status) => { ... }
反过来写成 @click="onItemClick(id, $event)"，方法就要是 (id, e) => { ... }。

内联中可直接用 $event 做简单操作

适合轻量逻辑，比如阻止默认行为 + 更新状态：
@click="$event.preventDefault(); selectedId = item.id"
@keyup.enter="$event.stopPropagation(); save()"
注意：$event 在这里可直接调用方法，如 $event.target、$event.key 等，无需额外声明。

修饰符和 $event 可共存

修饰符（如 .stop、.prevent）只是语法糖，不影响 $event 传递：
@click.stop="handle(item, $event) → 事件已冒泡被阻止，但你仍能拿到完整事件对象读取 e.clientX 或 e.target
@submit.prevent="handleSubmit($event, formData) → 默认提交被阻止，同时把事件和数据都传进方法。

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