在 vue 2 options api 中，methods 定义的事件处理函数在模板使用 @click="handleclick" 时自动接收原生 dom 事件对象为第一个参数，可调用 preventdefault() 等方法；若手动传参需显式写 $event；禁止使用箭头函数以免 this 失效。
在 Vue 2 的 Options API 中，methods 选项用于定义事件处理函数，而原生 DOM 事件对象会自动作为第一个参数传入（前提是模板中未显式传参或使用了正确的语法）。
事件处理函数自动接收原生事件对象
当在模板中使用 @click="handleClick" 这类简写绑定时，Vue 会把原生 DOM 事件对象（如 MouseEvent、KeyboardEvent）作为第一个参数传给 handleClick 方法。
- 无需额外声明参数名，但建议明确写成
event或e，便于阅读和调试 - 可直接调用
event.preventDefault()、event.stopPropagation()等原生方法 - 可通过
event.target获取触发事件的 DOM 元素，event.currentTarget获取绑定事件的元素
避免参数被覆盖：不要在模板中手动传参
如果在模板中写成 @click="handleClick('abc')"，那么 handleClick 收到的就只是字符串 'abc'，原生事件对象不会自动传入 —— Vue 不会“补位”。
若需同时传自定义参数又保留事件对象，应显式传入 $event：
- 模板：
@click="handleClick('abc', $event) - methods：
handleClick(msg, event) { console.log(msg, event.type); }
常见操作示例
以下是在 methods 中处理点击事件并使用原生事件对象的典型写法：
-
阻止默认行为：
event.preventDefault()（如表单提交、链接跳转） -
阻止冒泡：
event.stopPropagation()（避免触发父级 click） -
获取输入值：
event.target.value（配合<input>） -
区分左右键：
event.button === 0（左键），=== 2（右键）
注意 this 指向与箭头函数陷阱
methods 中的函数由 Vue 自动绑定 this 到当前组件实例，因此可安全访问 this.message、this.$refs 等。
⚠️ 不要用箭头函数定义事件处理函数（如 handleClick: (e) => { ... }），否则 this 不再指向组件实例，且 Vue 不会为其绑定上下文。
正确写法是普通函数：handleClick(e) { console.log(this.msg, e.target); }
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
