在 vue 3 中，用 @click.stop 可简洁阻止事件冒泡；适用于子父元素均有相同事件监听时，避免点击子元素触发父级动作，如弹窗内按钮不关闭遮罩、列表操作按钮不选中整行等。

在 Vue 3 中，用 @click.stop 就能直接阻止事件冒泡，无需额外写 JS 逻辑，这是最简洁、推荐的做法。

什么时候需要阻止冒泡？

当子元素和父元素都绑定了相同事件（比如 @click），点击子元素时，默认会先触发子元素事件，再“冒泡”到父元素触发它的事件。如果你只想响应子元素的点击，不希望连带触发父级动作，就必须阻止冒泡。

常见场景包括：

• 弹窗内部按钮点击，不关闭整个弹窗（避免触发遮罩层的关闭逻辑）
• 列表项中操作按钮（如删除、编辑），点击它不应选中整行
• 卡片内有标题、内容、操作按钮，只希望点击卡片空白处才触发折叠/跳转

怎么加 .stop 修饰符？

语法很简单：在事件指令后紧跟 .stop，中间不加空格。

例如：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

  删除

这样点击“删除”按钮，只执行 deleteItem，不会触发外层 openCard。

其他等效但不推荐的方式

虽然也能实现，但不如 .stop 直观、声明式强：

• 在事件函数里手动调用 event.stopPropagation()
• 用 @click.self —— 它不是阻止冒泡，而是限定“必须点在当前元素自身”，对子元素无效，适用场景不同
• 混用多个修饰符，如 @click.stop.prevent（同时阻止冒泡和默认行为）

注意事项

.stop 只影响当前这个事件监听器的传播路径，不影响同一元素上其他事件类型（比如 @mouseover 不会被 @click.stop 影响）。

修饰符支持链式使用，顺序无关，Vue 内部按预设逻辑依次执行（如先 stop 再 prevent）。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！