Vue基础语法如何通过事件参数传递获取原生DOM事件对象

Vue 模板中需显式写 $event 才能获取原生 DOM 事件对象，如 @click="handleClick($event)"；可与自定义参数共用，顺序需匹配方法签名；内联语句和修饰符均支持 $event。

在 Vue 模板中触发事件时，想拿到浏览器原生的 DOM 事件对象（比如 MouseEvent、KeyboardEvent），不需要额外封装或手动监听，Vue 本身就支持——关键在于写法要对。

直接用 $event 显式传递

模板里必须显式写出 $event，Vue 才会把原生事件对象传进去：

1. @click="handleClick($event)" → 方法中能收到完整事件对象
2. @click="handleClick"（不带括号）→ Vue 不自动注入，方法收不到事件对象
3. @click="handleClick()"（空括号）→ 函数被调用，但事件对象丢失

同时传自定义参数和事件对象

实际开发中常要既传业务数据，又操作事件行为（比如阻止默认、获取坐标）：

1. 模板：@click="handleItemClick(item.id, $event)"
2. 方法：handleItemClick(id, e) { e.preventDefault(); console.log(e.target); }
3. $event 必须显式写出；位置可前可后，但参数顺序要和方法一致

内联语句中直接使用 $event

简单逻辑可不写方法，直接在模板里处理：

1. @click="$event.stopPropagation(); isShow = false"
2. @keyup.enter="$event.preventDefault(); submitForm()"
3. 适合调试或单行操作，避免复杂逻辑塞进模板

修饰符和 $event 可共存

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

1. @click.stop="handleClick($event)" → 冒泡已被阻止，你仍能读 e.clientX 或 e.target
2. 修饰符和 $event 互不干扰，该干啥还干啥