问题： 点击子元素时，事件会像水泡一样向上“冒”到父元素（事件冒泡），触发父元素的同类事件。

解决： 使用 @click.stop 让事件止步于当前元素。

场景： 点击按钮关闭弹窗，不希望触发弹窗后面元素的点击事件。

<div @click="parentClick">
  <button @click.stop="childClick">点我</button>
</div>
<!-- 点击按钮只会触发 childClick，不会触发 parentClick -->

问题： 某些元素有默认行为，如点击链接会跳转页面，提交表单会刷新页面。

解决： 使用 @click.prevent 或 @submit.prevent 阻止这些默认动作。

场景： 单页面应用(SPA)中阻止链接跳转，表单提交前做验证。

<a href="/some-page" @click.prevent="handleLinkClick">点链接不跳转</a>
<form @submit.prevent="handleSubmit">...</form>

问题： 事件默认在冒泡阶段处理。

解决： 使用 @click.capture 让事件在捕获阶段（从父到子）就触发。

场景： 需要父元素在子元素之前处理事件（较少用）。

<div @click.capture="captureHandler">
  <button @click="buttonClick">按钮</button>
</div>
<!-- 点击按钮，先触发 captureHandler，再触发 buttonClick -->

问题： 事件冒泡导致父元素响应子元素触发的事件。

解决： 使用 @click.self 确保只有点击元素本身才触发，忽略内部子元素冒泡上来的事件。

场景： 点击卡片背景才关闭卡片，点击卡片内容区域则不关闭。

<div class="card" @click.self="closeCard">
  <div class="card-content">...内容区域...</div>
</div>
<!-- 点击内容区域不会触发 closeCard -->

问题： 某些操作只需执行一次（如支付按钮防重复提交）。

解决： 使用 @click.once，事件处理函数只会执行一次。

场景： 防止用户重复提交表单，首次点击后禁用按钮逻辑。

<button @click.once="payOrder">支付</button>
<!-- "支付"函数只执行一次 -->

问题： 滚动事件处理函数中调用 event.preventDefault() 会阻塞滚动，导致卡顿。

解决： 使用 @scroll.passive 明确告诉浏览器不会阻止默认滚动行为，浏览器可以立即渲染滚动效果。

场景： 需要监听滚动事件做非阻塞操作（如埋点、懒加载）。

<div @scroll.passive="handleScroll">...</div>

问题： 需监听特定按键事件。

解决： 使用 @keyup.enter、@keyup.esc、@keyup.space 等，直接响应回车、ESC、空格等按键。

场景： 在输入框按回车提交表单。

<input type="text" @keyup.enter="submitForm" />

代码简洁： 无需在方法内写 event.stopPropagation() 或 event.preventDefault()。

逻辑清晰： 修饰符直接声明在模板里，意图明确。

功能强大： 覆盖常见事件处理需求（阻止冒泡、阻止默认、按键过滤等）。

修饰符通过点号 . 加在事件名后面（如 @click.stop）。

可以串联使用（如 @click.stop.prevent 同时阻止冒泡和默认行为）。

键盘修饰符支持按键别名（.enter, .tab, .delete, .esc, .space, .up, .down, .left, .right）或直接使用按键 key（如 @keyup.page-down）。