Vue组件事件冒泡需合理控制：该阻止时用.stop精准拦截（如弹窗按钮），语义明确且无运行开销；高频子项用委托上移监听（如大型列表），降低30%+处理器数量；按需用.self限定仅父元素触发（如折叠面板空白区收起）。
Vue 组件中事件冒泡本身不是问题，关键在于是否被合理控制。处理不当会导致父级逻辑误触发、性能下降或交互异常；而善加利用，则能简化绑定、提升响应效率。核心思路是：该阻止时精准拦截，该委托时集中管理。
用 .stop 修饰符快速阻断干扰
当子元素点击不应影响父容器行为时（比如弹窗内的按钮、卡片里的操作项），直接加 .stop 是最轻量、最可靠的方案。
- 写法简洁：
<button @click.stop="doAction">删除</button> - 语义明确：开发者一眼看懂“此处不冒泡”
- 无运行时判断开销：Vue 编译时自动注入
event.stopPropagation() - 适合绝大多数 UI 控件场景，如表单按钮、工具栏图标、列表操作项
用事件委托替代高频子项绑定
当列表项超过 50 条，或存在动态增删（如树形目录、无限滚动），逐个绑定 @click 会带来内存和初始化负担。此时应把事件监听上移到父容器，靠 event.target 或 closest() 定位真实目标。
- 模板中只在
<ul>或<div class="list">上写一次@click="handleListClick" - 方法内用
event.target.closest('li')判断是否点中有效条目 - 配合
:data-id="item.id"或:key属性传递上下文，避免闭包引用 - 对大型列表（>100 项）可降低 30%+ 的事件处理器数量
按需使用 .self 和 .capture 组合控制触发边界
不是所有“父容器点击”都该被子元素触发。比如一个可展开的折叠面板，希望点击空白区域才收起，但点击内部按钮/输入框时不响应 —— 这时 .self 就很合适。
立即学习“前端免费学习笔记（深入）”；
-
<div @click.self="togglePanel">...：仅当点击div自身（非子节点）才触发 - 需要在捕获阶段就截断（比如全局快捷键屏蔽），可用
@click.capture.stop -
.self和.stop不冲突，可同时使用：@click.self.stop - 注意：.self 对
disabled元素无效，需配合 CSS pointer-events 处理
区分 event.target 和 event.currentTarget 避免逻辑错位
在委托或嵌套监听中，混淆这两个属性常导致取错数据源。简单记：target 是“你真正点中的那个元素”，currentTarget 是“当前绑定事件的那个元素”。
- 委托场景下，
event.target指向被点击的li，event.currentTarget指向外层ul - 取 ID 推荐用
target.dataset.id或target.getAttribute('data-id')，而非依赖this - 在
setup+script setup中，this不可用，必须显式读取 event 对象 - 调试时打印两者对比，能快速定位事件流向是否符合预期
