vue事件修饰符通过.capture、.stop、.self精准控制事件流：.capture提前至捕获阶段响应，.stop阻断冒泡，.self限定仅自身触发，组合顺序决定执行逻辑。
Vue模板语法处理多事件流，核心在于理解事件的三阶段（捕获→目标→冒泡）并结合修饰符精准干预。不是所有场景都该阻止冒泡，也不是所有点击都要加.stop——关键看交互意图和事件流向是否符合预期。
用 .capture 提前拦截：从外向内响应
默认事件在冒泡阶段触发，而.capture把监听提前到捕获阶段。父元素加了它，就能在事件到达子元素前就响应：
-
<div><button>点我</button></div>→ 点按钮时先输出outer，再inner - 适合全局快捷键监听、弹窗遮罩层统一拦截等需要“优先响应父级”的场景
- 注意：
.capture本身不阻止传播，如需拦截到底，得搭配.stop，比如@click.capture.stop
用 .stop 阻断向上冒泡：最常用也最可靠
子元素点击不该触发父容器逻辑时，.stop是首选方案，它等价于调用event.stopPropagation()：
-
<div><button>关闭</button></div>→ 关闭按钮点击后，菜单不会因冒泡再次打开 - 修饰符位置敏感：
@click.stop.prevent先阻冒泡再防默认；@click.prevent.stop则顺序相反 - 比在方法里手动写
event.stopPropagation()更声明式，模板即逻辑，可读性高
用 .self 限定触发边界：只认“自己身上”的点击
.self不关心事件来源，只检查event.target === event.currentTarget：
-
<div class="card"> <img><p>描述</p> </div>→ 点图片或文字不触发selectCard，只有点卡片空白区域才触发 - 天然适配“点击外部关闭”需求，比如模态框背景：
<div class="modal-bg"><div class="modal-content">...</div></div> - 它不阻止冒泡，只是过滤触发条件；子元素事件仍会正常冒泡，只是父元素的
.self处理器不执行
修饰符组合应对复杂流程：顺序决定行为
多个修饰符串联时，执行顺序与书写顺序一致，直接影响最终效果：
-
@click.stop.prevent：先阻止冒泡，再阻止默认行为（如链接跳转） -
@click.prevent.self：先阻止默认行为，再判断是否为自身触发（常用于表单按钮，避免提交又误触父级） -
@click.capture.self：在捕获阶段检测是否点击自身，适合深层嵌套中“仅响应某一层”的特殊控制 - 慎用
.once与.stop混用：事件只触发一次，但停止冒泡的效果仍生效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
