在 Vue 模板中绑定事件时，必须显式传递 $event 才能获取原生 DOM 事件对象；@click="handleClick($event)" 可使方法接收事件参数，与自定义参数混用时需注意顺序，内联语句和修饰符均支持 $event。
在 Vue 模板中绑定事件时，想在回调函数里拿到原生 DOM 事件对象（比如 MouseEvent、KeyboardEvent），关键不是靠自动注入，而是要显式传递 $event。不写它，就拿不到；写了，就能直接用。
必须显式写 $event 才能获取
Vue 不会默认把原生事件对象塞进方法参数里。你得在模板中主动传进去：
-
@click="handleClick($event)"→ 方法中第一个参数就是原生事件对象 -
@click="handleClick()"或@click="handleClick"→ 参数为空，拿不到 event - 即使方法名后面带了括号，也必须把
$event写出来，不能省略
和自定义参数一起用也没问题
实际开发中常要同时传数据和事件对象，比如点击列表项时既要 ID 又要阻止默认行为：
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
- 模板：
@click="handleItemClick(item.id, $event)" - 方法：
function handleItemClick(id, e) { e.preventDefault(); console.log(id); } -
$event的位置可以放前面或后面，但必须和函数参数顺序一致
内联语句里也能直接用 $event
逻辑简单时，不用单独写方法，直接在模板里操作：
@click="$event.stopPropagation(); isShow = false"@keyup.enter="$event.preventDefault(); submitForm()"- 注意：只适合轻量逻辑，别在里面写循环或复杂判断
修饰符和 $event 可以共存
使用 .stop、.prevent 这类修饰符不影响 $event 的传递：
-
@click.stop="handleClick($event)"→ 既阻止冒泡，又能在方法里读e.clientX等属性 - 修饰符只是语法糖，底层还是调用原生方法，$event 始终完整可用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
