Vue 事件修饰符用法详解
在 vue.js 开发中，处理用户交互（如点击、按键）是基础操作。但有时原生事件行为不够理想。这时，Vue 事件修饰符 就能轻松解决问题，它们像小助手一样直接加在事件名后面，让代码更简洁高效。以下是主要修饰符及其作用：
.stop - 阻止事件冒泡
问题： 点击子元素时，事件会像水泡一样向上“冒”到父元素（事件冒泡），触发父元素的同类事件。
解决： 使用 @click.stop 让事件止步于当前元素。
场景： 点击按钮关闭弹窗，不希望触发弹窗后面元素的点击事件。
<div @click="parentClick">
<button @click.stop="childClick">点我</button>
</div>
<!-- 点击按钮只会触发 childClick，不会触发 parentClick -->.prevent - 阻止默认行为
问题： 某些元素有默认行为，如点击链接会跳转页面，提交表单会刷新页面。
解决： 使用 @click.prevent 或 @submit.prevent 阻止这些默认动作。
场景： 单页面应用(SPA)中阻止链接跳转，表单提交前做验证。
<a href="/some-page" @click.prevent="handleLinkClick">点链接不跳转</a>
<form @submit.prevent="handleSubmit">...</form>.capture - 使用捕获模式
问题： 事件默认在冒泡阶段处理。
解决： 使用 @click.capture 让事件在捕获阶段（从父到子）就触发。
场景： 需要父元素在子元素之前处理事件（较少用）。
<div @click.capture="captureHandler">
<button @click="buttonClick">按钮</button>
</div>
<!-- 点击按钮，先触发 captureHandler，再触发 buttonClick -->.self - 仅当事件在自身触发
问题： 事件冒泡导致父元素响应子元素触发的事件。
解决： 使用 @click.self 确保只有点击元素本身才触发，忽略内部子元素冒泡上来的事件。
场景： 点击卡片背景才关闭卡片，点击卡片内容区域则不关闭。
<div class="card" @click.self="closeCard">
<div class="card-content">...内容区域...</div>
</div>
<!-- 点击内容区域不会触发 closeCard -->.once - 事件只触发一次
<button @click.once="payOrder">支付</button>
<!-- "支付"函数只执行一次 -->.passive - 提升滚动性能
问题： 滚动事件处理函数中调用 event.preventDefault() 会阻塞滚动，导致卡顿。
解决： 使用 @scroll.passive 明确告诉浏览器不会阻止默认滚动行为，浏览器可以立即渲染滚动效果。
场景： 需要监听滚动事件做非阻塞操作（如埋点、懒加载）。
<div @scroll.passive="handleScroll">...</div>键盘事件修饰符 (.enter, .esc 等)
问题： 需监听特定按键事件。
解决： 使用 @keyup.enter、@keyup.esc、@keyup.space 等，直接响应回车、ESC、空格等按键。
场景： 在输入框按回车提交表单。
<input type="text" @keyup.enter="submitForm" />为什么使用 Vue 事件修饰符？
代码简洁： 无需在方法内写 event.stopPropagation() 或 event.preventDefault()。
逻辑清晰： 修饰符直接声明在模板里，意图明确。
功能强大： 覆盖常见事件处理需求（阻止冒泡、阻止默认、按键过滤等）。
掌握 Vue 事件修饰符的关键点：
修饰符通过点号 . 加在事件名后面（如 @click.stop）。
可以串联使用（如 @click.stop.prevent 同时阻止冒泡和默认行为）。
键盘修饰符支持按键别名（.enter, .tab, .delete, .esc, .space, .up, .down, .left, .right）或直接使用按键 key（如 @keyup.page-down）。
理解并熟练运用这些 Vue 事件修饰符，能让你更高效地处理用户交互，编写出更清晰、更易维护的 Vue 组件代码。它们是 Vue 模板语法中提升开发体验的重要工具。
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
