Vue 中用 @事件名.stop="处理函数" 阻止事件冒泡，编译时自动插入 event.stopPropagation()；适用于弹窗按钮、列表操作项等场景，可与 .prevent 等修饰符组合，优于手动调用。
在 Vue 模板中，用 .stop 修饰符阻止事件冒泡，只需在事件绑定后加一个点号和 stop，语法简洁、效果明确，不需要写额外 JS 逻辑。
核心写法：@事件名.stop="处理函数"
这是最直接的使用方式，Vue 编译时会自动插入 event.stopPropagation()，让事件停在当前元素，不再向父级传递。
-
示例：
<div @click="handleParent"><br> <button @click.stop="handleChild">点我</button><br></div>
- 点击按钮时，只执行
handleChild；handleParent完全不会被触发 - 如果去掉
.stop，点击按钮会先执行子函数，再向上冒泡执行父函数
常见适用场景
不是所有嵌套点击都需要阻止冒泡，但以下情况加 .stop 很自然：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 弹窗内部按钮（如“确认”“取消”）点击时不关闭弹窗——父层监听了遮罩层的点击关闭逻辑，子按钮需加
@click.stop - 列表项中带操作按钮（如删除图标），点图标执行删除，但不希望同时触发整行的「跳转详情」行为
- 自定义下拉菜单里，点击选项不收起菜单（因为菜单容器本身监听了外部点击收起），此时选项需加
@click.stop
注意与其他修饰符组合使用
.stop 可以和其他事件修饰符连用，顺序不影响功能，推荐按逻辑习惯排列：
立即学习“前端免费学习笔记（深入）”；
-
@click.stop.prevent：既阻止冒泡，又阻止默认行为（比如按钮在表单内，既要防提交刷新，又要防触发父层事件） -
@click.capture.stop：先捕获再停止（较少用，一般仅特殊事件调度需要） - 不建议和
.self同时用于同一事件——两者语义不同：.self是“只响应自身触发”，.stop是“不让事件传出去”，混用易造成理解偏差
替代方案对比
虽然也能在方法里手动调用 event.stopPropagation()，但模板中用 .stop 更清晰：
- 逻辑分离：模板声明意图（“这里不该冒泡”），方法专注业务（“删数据”“发请求”）
- 可读性强：一眼看出该事件是否影响外层，无需进方法查代码
- 无遗漏风险：不像手写
event.stopPropagation()那样可能忘记写或写错位置
