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 更新，或未在

   ⚠️ 注意事项：

   • watch 默认不监听初始值，务必添加 { immediate: true } 选项，否则 Explorer 首次渲染时 props.fen 已存在却无响应；
   • 确保父组件中 currentFen 是 ref（而非普通变量），且赋值使用 .value = ...；
   • 若 Board 中 emit('fen') 调用时机早于父组件 setup 执行完毕（极罕见），可加 nextTick 保障顺序，但通常无需；
   • 仅当跨层级、多模块、松耦合事件（如全局通知、快捷键响应）才需 mitt；本例中 fen 是明确的数据流，应走响应式 prop → watch 路径，语义清晰、调试友好、无额外依赖。

   ? 总结：Vue 3 的响应式设计已足够支撑大多数兄弟组件通信场景。善用 ref + watch({ immediate })，比引入事件总线更简洁、可靠、符合 Composition API 设计哲学。

   文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Vue3 兄弟组件通信正确方法解析》文章吧，也可关注golang学习网公众号了解相关技术文章。