Vue3 兄弟组件通信正确方法解析

本文深入解析了 Vue 3 中兄弟组件通信的正确实践，明确指出无需盲目引入 mitt 等事件总线，而应优先利用 Vue 3 原生响应式系统——通过父组件用 `ref` 管理共享状态（如 FEN 字符串），再以 props 下发并配合 `watch(..., { immediate: true })` 精准响应初始值与后续变更，实现简洁、可靠、可调试且零额外依赖的解耦通信，真正践行 Composition API 的设计哲学。

在 Vue 3 单文件组件中，父子组件可通过 defineEmits 和 v-on 通信，但兄弟组件（如 Board 与 Explorer）无法直接监听彼此事件；需借助事件总线（如 mitt）或状态提升（Pinia/Vue reactive）实现解耦通信。

在 Vue 3 单文件组件中，父子组件可通过 `defineEmits` 和 `v-on` 通信，但兄弟组件（如 Board 与 Explorer）无法直接监听彼此事件；需借助事件总线（如 mitt）或状态提升（Pinia/Vue reactive）实现解耦通信。

在你的国际象棋应用中，Board 组件通过 emit('fen', ...) 向父组件传递 FEN 字符串，父组件再将 currentFen 作为 prop 传给 Explorer——这一流程本身逻辑正确，问题不在于“传不过去”，而在于响应不及时或未正确建立响应式依赖。

你当前的 Explorer 组件代码中使用了 watch(() => props.fen, ...)，这本身是可行的，但存在两个关键隐患：

1. props.fen 为 undefined 或空字符串时，watch 可能不会触发（尤其首次渲染）；
2. 父组件未在 updatefen 后确保响应式更新被正确捕获（例如未使用 ref 的 .value 更新，或未在