Vue Options API如何使用 methods 选项编写组件的事件处理函数

methods选项用于定义事件处理函数，通过this访问响应式数据，模板中用@绑定事件并支持传参和修饰符，$event可获取原生事件对象。

Vue Options API 中的 methods 选项是定义事件处理函数最直接的方式，它让逻辑与模板绑定清晰、调用自然，适合中小型组件或习惯传统写法的开发者。

methods 的基本写法和 this 绑定

在 methods 对象中定义普通函数，函数内部通过 this 访问组件的响应式数据（如 data 返回的属性）、其他方法或生命周期钩子：

1. 函数名即为方法名，模板中可直接引用，无需括号（如 @click="increment"）
2. this 指向当前组件实例，能安全读写 data 中的响应式字段
3. 所有 methods 函数自动绑定组件上下文，不用担心 this 丢失问题

在模板中绑定事件处理函数

使用 v-on（简写为 @）将 methods 中的方法绑定到 DOM 事件上：

1. 基础写法：@click="handleClick"，点击时执行 handleClick 方法
2. 传参写法：@input="onInput($event, 'custom')" ，第一个参数固定为原生事件对象，后续为自定义参数
3. 不带参数时，$event 不会自动注入；需要时必须显式写出

配合事件修饰符简化逻辑

Vue 提供的事件修饰符可避免在 methods 中手动调用 preventDefault() 或 stopPropagation()：

1. @submit.prevent：阻止表单默认提交行为
2. @click.stop：阻止事件冒泡
3. @keyup.enter：仅在按下 Enter 键时触发
4. 修饰符可链式使用，例如 @click.stop.prevent

访问原生事件与自定义参数

当需要操作 DOM 元素或获取输入值时，常借助 $event：

1. 在模板中传入：@change="handleChange($event)"
2. 在 methods 中接收：handleChange(event) { console.log(event.target.value); }
3. 也可同时传额外参数：@click="handleClick($event, 'delete', item.id)"，对应方法签名 handleClick(e, action, id)