事件冒泡本身不直接同步同级组件状态，而是将子组件变化通知父组件，再由父组件统一更新并分发props给所有子组件，实现状态一致。

事件冒泡本身不直接用于“多个同级组件”的状态同步，它只负责将事件从子元素向上传递到父元素。要让多个同级组件保持状态一致，关键不是靠冒泡本身，而是利用冒泡把变化“交上去”，再由父组件统一派发回所有子组件。

冒泡只是第一步：把变化通知给共同父组件

同级组件之间没有直接通信渠道，但它们共享同一个父组件。当某个子组件状态改变（比如点击切换开关），它不自己更新其他兄弟，而是触发一个事件——这个事件通过冒泡自然到达父组件。

• 子组件内用 dispatchEvent 发出自定义事件，或直接调用 this.$emit（Vue）、props.onUpdate（React）等向上通知方式
• 避免在子组件里操作 window 或 localStorage，否则会绕过数据流，难以追踪和测试
• 冒泡过程不需要手动干预，只要不调用 stopPropagation()，事件就会如期抵达父组件

父组件做协调者：收上来，再分下去

父组件监听来自任一子组件的状态变更后，应立即更新自己的状态，并把新状态作为 props 重新传给所有子组件。这样所有同级组件都基于同一份数据渲染，天然保持一致。

AVCLabs

一款集AI视频处理与增强能力于一体的工具平台，提供背景移除、画面处理和视频优化等功能，适合日常后期制作。

下载

• 例如：三个开关组件控制同一组权限，任一开关变化 → 父组件收到更新 → 合并为一个权限对象 → 重传给全部三个开关
• 使用 React 的 useState 或 Vue 的 ref/reactive 管理这份共享状态，确保响应式更新
• 不要在父组件里用 setTimeout 或异步延迟更新，否则会出现短暂的视觉不一致

避免常见误区：冒泡 ≠ 全局广播

有人误以为让事件“冒泡到 document”就能通知所有组件，这是危险的。document 级监听容易失控，且违背组件封装原则。

• 冒泡路径是固定的 DOM 树路径，不是任意组件都能“收到”；非父子关系的同级组件不会自动被影响
• 如果强行用 window.addEventListener 实现跨组件通信，就已脱离“冒泡”范畴，属于全局事件总线，需自行管理生命周期和命名冲突
• 高频操作（如输入、拖拽）不适合走冒泡+父组件中转，此时应考虑局部状态+受控组件模式

补充：什么时候该换别的方案？

当同级组件分布较散、嵌套层级深，或需要跨路由/跨模块同步时，冒泡+父组件中转会变得笨重。

• 简单场景：2–4 个同级子组件，共用一个父容器 → 冒泡 + 状态提升是最轻量、最易维护的方式
• 中等复杂度：多个页面/模块都要响应同一状态 → 改用 Context（React）、Provide/Inject（Vue）或 Zustand/Pinia
• 跨标签页需求：冒泡完全无效，此时应结合 localStorage + storage 事件实现多窗口同步