Vue事件修饰符中，.stop用于阻止DOM事件冒泡，.prevent用于取消浏览器默认行为，二者可组合为.stop.prevent实现精准控制；.self则限定事件仅在绑定元素自身触发。
Vue 组件内部事件冒泡不是组件间通信问题，而是 DOM 层级事件传播行为。它发生在模板渲染出的真实 DOM 结构中，和组件封装无关——哪怕子组件被包裹在父组件模板里，只要它们在 DOM 树中存在嵌套关系，原生点击、提交等事件仍会按标准冒泡规则向上触发。
.stop 修饰符：精准控制事件作用域
当一个按钮嵌套在可点击卡片内，点击按钮本意是执行操作，却意外触发了卡片的展开逻辑，这就是典型的冒泡干扰。.stop 就是用来“截断”这个向上传播链的工具。
- 它对应
event.stopPropagation()，只影响当前事件在 DOM 树中的传播路径 - 不会影响同一元素上其他事件监听器（比如同时绑定了 @click 和 @mousedown）
- 常见于弹窗遮罩层、下拉菜单项、列表操作按钮等需要严格区域响应的场景
.prevent 修饰符：剥离浏览器默认动作
表单提交刷新页面、链接跳转、滚动时的默认行为……这些都不是业务逻辑需要的。.prevent 的作用就是让事件“只执行你的代码，不做浏览器想做的事”。
Json Schema Toolkit
下载
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
- 它调用
event.preventDefault()，仅取消默认行为，不干涉冒泡 - 最常用在
@submit.prevent和@click.prevent上 - 单独使用时注意：若父元素也有点击逻辑，它仍会冒泡上去——需配合 .stop 才能完全隔离
组合使用：.stop.prevent 是高频搭档
比如一个自定义关闭按钮（<span @click.stop.prevent="closeModal">×</span>），既要阻止它作为普通文本节点可能触发的父级点击，又要防止它被误认为链接而跳转。
立即学习“前端免费学习笔记（深入）”；
- 修饰符顺序不影响功能，Vue 内部统一按 prevent → stop 顺序执行
- 推荐写成
@click.stop.prevent，语义更贴近“先别跳转，再别传上去” - 它比在方法里手动写两行 event 方法更简洁、更声明式，也更容易维护
搭配 .self 实现“点击自身才响应”
有些交互要求必须点在容器本身才触发，比如点击模态框背景关闭，但不想让弹窗内容区域触发关闭。
-
@click.self.stop表示：只有直接点击该 div（非其子元素），才执行 handler，且不冒泡 - 它和
.stop不同：.self 判断触发源是否为绑定元素自身；.stop 是阻止已发生的事件继续上传 - 二者常一起用，避免子元素点击误触父容器逻辑
