工作原理:

1. 点击 "孙组件1A (点击我)":
   • Grandchild1AComponent 记录其点击 (1)。
   • 事件冒泡。Child1Component 的处理器记录事件 (2)。
   • 事件进一步冒泡。ParentComponent 的处理器记录事件 (3)。
   • ParentComponent 根据检测到的点击来源更新其状态。
   • 此状态更改作为 prop 传递给 Child2Component，然后再传递给 Grandchild2AComponent。
   • Grandchild2AComponent 重新渲染并显示来自父组件的消息。
2. 点击 "子组件1" 的橙色区域 (而非 "孙组件1A"):
   • Child1Component 的处理器记录其点击 (2)。(Grandchild1A 的处理器不会触发)。
   • 事件冒泡。ParentComponent 的处理器记录该事件 (3)。
   • ParentComponent 更新状态；Grandchild2AComponent 显示来自父组件的消息，指示点击来源于 子组件1。
3. 点击 "父组件" 的绿色区域 (在子组件1和子组件2之外):
   • 只有 ParentComponent 的处理器记录点击 (3)。
   • ParentComponent 更新状态；Grandchild2AComponent 显示来自父组件的消息，指示是父组件自身被点击。
4. 点击 "孙组件2A (点我试试)":
   • Grandchild2AComponent 记录其点击 (4)。
   • 事件冒泡。Child2Component 的处理器记录事件 (5)。
   • 事件进一步冒泡。ParentComponent 的处理器记录事件 (3)。
   • ParentComponent 更新状态；Grandchild2AComponent (自身) 会根据父组件传递下来的新消息再次刷新显示。
5. 点击 "子组件2 (点我试试)" 的蓝色区域 (而非 "孙组件2A"):
   • Child2Component 的处理器记录其点击 (5)。
   • 事件冒泡。ParentComponent 的处理器记录事件 (3)。
   • ParentComponent 更新状态；Grandchild2AComponent 会根据父组件传递下来的新消息刷新显示。
6. 事件不会直接冒泡到兄弟组件:
   • 来自 Grandchild1A 的点击事件不会直接冒泡到 Child2Component 或 Grandchild2AComponent。通信是通过共同的祖先组件 (ParentComponent) 管理状态来实现的。
7. 阻止冒泡:
   • 如果您在 Grandchild1AComponent 的处理器中取消注释 e.stopPropagation():
   • 只有 "1. Grandchild1AComponent clicked" 会被记录。
   • 事件不会冒泡到 Child1 或 Parent。
   • 因此，ParentComponent 不会收到通知，Grandchild2AComponent 也不会收到关于此特定点击的更新消息。

请检查浏览器的开发者控制台以获取详细的日志消息。data-id 属性有助于在日志和代码中识别元素。