v-on支持对象语法绑定多个事件且需在methods中定义对应方法；传参须用内联函数显式传递$event；修饰符仅适用于简写语法，不可用于对象语法；处理器推荐签名handleClick(id, event)。
v-on 可以同时绑定多个事件处理器，也能安全传递参数，关键在于写法是否符合 Vue 的响应式逻辑和事件调用约定。
多事件绑定：用对象语法一次声明多个事件
当一个元素需要响应多种用户行为（如点击、鼠标移入、键盘回车）时，推荐使用 v-on 的对象语法，避免重复写多个 @click、@mouseenter 等：
- 写法：
v-on="{ click: handleClick, mouseenter: handleEnter, keydown: handleKey }" - 事件名必须是合法的 DOM 事件名（如
click、input），不支持自定义事件名作为键名 - 对应方法需在
methods中定义，且默认接收原生事件对象（event） - 不支持在对象语法中直接传参；如需传参，应改用函数调用形式
参数传递：用内联函数包装，但注意 event 的显式传递
若需向事件处理器传入额外参数（如 ID、索引、状态值），必须用内联箭头函数或普通函数包裹调用：
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
- 正确写法：
@click="handleClick(item.id, $event)"——$event是 Vue 提供的原生事件别名，显式传入才能在方法中访问 - 错误写法：
@click="handleClick(item.id)"—— 此时event会被覆盖为item.id，丢失原生事件信息 - 也可写成：
@click="(e) => handleClick(item.id, e)"，语义更清晰，尤其适合复杂逻辑
修饰符与参数共存：修饰符优先处理，不影响参数传递
Vue 修饰符（如 .stop、.prevent、.once）可与内联函数写法组合使用，它们在事件触发前生效，不干扰参数结构：
立即学习“前端免费学习笔记（深入）”；
- 例如：
@click.stop.prevent="handleSubmit(formId, $event)"—— 先阻止冒泡和默认行为，再执行方法 - 修饰符不能用于对象语法（
v-on="{ click.stop: fn }"无效），仅支持在简写语法中使用 - 多个修饰符顺序无关，Vue 内部统一处理
事件处理器内部取参：保持方法签名简洁，避免硬编码
在 methods 中定义的处理器，应设计为可复用、易测试的形式：
- 推荐签名：
handleClick(id, event) { ... }，第一个参数为业务数据，第二个为事件对象 - 如无需事件对象，可省略
$event传入，方法也只需一个参数 - 避免在方法里直接读取
$event.target.value等，优先通过 v-model 或事件委托统一管理数据流
