事件冒泡本身不直接同步同级组件状态，而是将子组件变化通知父组件，再由父组件统一更新并分发props给所有子组件，实现状态一致。
事件冒泡本身不直接用于“多个同级组件”的状态同步，它只负责将事件从子元素向上传递到父元素。要让多个同级组件保持状态一致，关键不是靠冒泡本身，而是利用冒泡把变化“交上去”，再由父组件统一派发回所有子组件。
冒泡只是第一步：把变化通知给共同父组件
同级组件之间没有直接通信渠道，但它们共享同一个父组件。当某个子组件状态改变（比如点击切换开关），它不自己更新其他兄弟，而是触发一个事件——这个事件通过冒泡自然到达父组件。
- 子组件内用
dispatchEvent发出自定义事件，或直接调用this.$emit（Vue）、props.onUpdate（React）等向上通知方式 - 避免在子组件里操作
window或localStorage，否则会绕过数据流，难以追踪和测试 - 冒泡过程不需要手动干预，只要不调用
stopPropagation()，事件就会如期抵达父组件
父组件做协调者：收上来，再分下去
父组件监听来自任一子组件的状态变更后，应立即更新自己的状态，并把新状态作为 props 重新传给所有子组件。这样所有同级组件都基于同一份数据渲染，天然保持一致。
- 例如：三个开关组件控制同一组权限，任一开关变化 → 父组件收到更新 → 合并为一个权限对象 → 重传给全部三个开关
- 使用 React 的
useState或 Vue 的ref/reactive管理这份共享状态，确保响应式更新 - 不要在父组件里用
setTimeout或异步延迟更新，否则会出现短暂的视觉不一致
避免常见误区：冒泡 ≠ 全局广播
有人误以为让事件“冒泡到 document”就能通知所有组件，这是危险的。document 级监听容易失控，且违背组件封装原则。
- 冒泡路径是固定的 DOM 树路径，不是任意组件都能“收到”；非父子关系的同级组件不会自动被影响
- 如果强行用
window.addEventListener实现跨组件通信，就已脱离“冒泡”范畴，属于全局事件总线，需自行管理生命周期和命名冲突 - 高频操作（如输入、拖拽）不适合走冒泡+父组件中转，此时应考虑局部状态+受控组件模式
补充：什么时候该换别的方案？
当同级组件分布较散、嵌套层级深，或需要跨路由/跨模块同步时，冒泡+父组件中转会变得笨重。
- 简单场景：2–4 个同级子组件，共用一个父容器 → 冒泡 + 状态提升是最轻量、最易维护的方式
- 中等复杂度：多个页面/模块都要响应同一状态 → 改用 Context（React）、Provide/Inject（Vue）或 Zustand/Pinia
- 跨标签页需求：冒泡完全无效，此时应结合
localStorage+storage事件实现多窗口同步
