.stop 是 vue 3 中阻止事件冒泡的最简方式，对应 event.stoppropagation()，直接在事件指令后添加即可，如 @click.stop="handler"，使事件不向父级传播，适用于弹窗关闭、列表操作等场景。
在 Vue 3 中，`.stop` 是最常用、最简洁的阻止事件冒泡方式，它直接对应原生 JavaScript 的 event.stopPropagation()，但无需手动传参或写逻辑，写在模板里就能生效。
核心用法：加在事件指令末尾
语法很简单：在 `@click`（或其他事件）后加上 `.stop` 即可。Vue 会自动在事件处理前调用 stopPropagation，让事件停在当前元素，不再向父级传播。
<button>子按钮</button><div>父容器</div>
点击按钮时，只执行 handleChild，handleParent 完全不会被触发。
典型适用场景
这些情况中，不加 `.stop` 很容易引发误操作或逻辑错乱：
- 弹窗/模态框内部操作：比如点击关闭按钮（×），不希望同时触发背后遮罩层的“点击关闭”逻辑
- 列表项中的操作按钮：点击某一行里的「删除」图标，不应触发整行的「跳转详情」点击行为
- 嵌套表单控件：如自定义下拉选择器内有清空按钮，点它不应提交整个外层表单
- 父子组件通信隔离：子组件按钮点击后，明确不希望通知父组件做任何响应
和其它方式对比
虽然也能在方法里手动调用 event.stopPropagation()，但 `.stop` 更推荐：
- 更声明式、语义清晰，意图一目了然
- 不用在每个 handler 里重复写
event?.stopPropagation() - 避免因忘记传
event参数导致失效（例如@click="submit()"没传参就无法调用stopPropagation） - 与 `.prevent`、`.once` 等修饰符天然兼容，可连写如
@click.stop.prevent
注意边界情况
`.stop` 只影响**当前事件类型**的冒泡路径，不影响其他事件，也不影响捕获阶段：
- 它不会阻止同元素上其他事件（如 `@mousedown.stop` 不影响 `@mouseup`）
- 如果父元素用了 `.capture`，`.stop` 仍能生效——因为 `.stop` 在目标阶段就终止了后续传播，捕获阶段已结束
- `.stop` 和 `.self` 不冲突，但作用不同：`.self` 是过滤触发源，`.stop` 是切断传播链
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
