.stop 用于阻止事件冒泡，.prevent 用于取消默认行为；二者可连用如@click.stop.prevent，顺序不限但推荐先 prevent 后 stop，适用于弹窗、表单提交等场景。
在 Vue.js 模板中，.stop 和 .prevent 是事件修饰符，用于控制原生 DOM 事件的行为，尤其针对事件冒泡和默认行为这两个常见问题。
什么是事件冒泡？为什么需要 .stop
当子元素触发事件（如点击），该事件会逐层向上传播到父元素，这就是冒泡机制。比如一个按钮在卡片内，点击按钮可能同时触发按钮和卡片的 click 处理函数，造成意外逻辑执行。
.stop 的作用是调用 event.stopPropagation()，阻止事件继续向上冒泡。
- 写法：
@click.stop="handleClick" - 适用场景：弹出菜单、下拉框、模态框遮罩层等需要精确响应区域的交互
- 注意：它只影响当前绑定事件的冒泡，不影响同一元素上其他事件监听器的执行
什么是默认行为？为什么需要 .prevent
某些 HTML 元素有浏览器内置的默认动作，例如：<a href="#"></a> 点击会跳转到页面顶部，<form></form> 提交会刷新页面。这些默认行为在 Vue 表单或链接交互中往往不需要。
.prevent 对应 event.preventDefault()，用于取消这些默认动作。
- 写法：
@submit.prevent="onSubmit"或@click.prevent - 常用组合：
@submit.prevent是表单提交最简写法，避免页面刷新 - 注意：它不阻止冒泡，仅阻止默认行为；如需两者兼顾，可连用：
@click.stop.prevent
.stop 与 .prevent 可以一起用吗？
可以，且很常见。修饰符的顺序不影响功能，Vue 内部会依次调用 preventDefault 和 stopPropagation。
- 推荐写法：
@click.stop.prevent或@click.prevent.stop（语义上先 prevent 再 stop 更直观） - 典型用例：自定义链接（
<a></a>），既不跳转也不触发父容器点击 - 链式修饰符是 Vue 的语法糖，比在方法里手动调用
event.preventDefault()更简洁、更声明式
和其他修饰符配合使用的提示
Vue 还提供如 .capture、.self、.once 等修饰符，它们可与 .stop 和 .prevent 组合使用。
-
@click.capture.prevent：在捕获阶段就阻止默认行为 -
@click.self.stop：仅当点击元素本身（非子元素）时才停止冒泡 - 多个修饰符之间用点连接，无空格，顺序自由但建议按逻辑分组（如行为类
.prevent放前，传播类.stop放后）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
