Vue3.2：子组件Board更新Fen后无法同步到Explorer组件的问题

核心错误：变量名大小写不匹配 #

父组件中定义的响应式变量是currentfen（小写f），但模板里传给<explorer>的属性是:fen="currentFen"（大写F）。Vue对标识符大小写严格区分，导致子组件接收不到更新后的Fen值，自然无法触发watch。

修复步骤 #

1. 修正父组件的模板变量名
   把模板中的currentFen改为currentfen，和脚本中定义的变量名保持一致：

<template>
<div>
     <board @fen="updatefen" @move="updateMove"></board>
     <!-- 修正变量名大小写 -->
     <explorer :fen="currentfen"></explorer>
</div>
</template>
<script setup>
import { ref } from 'vue';

let currentfen = ref('')
function updatefen(fen){
  currentfen.value = fen
}
// 补充updateMove函数避免控制台报错
function updateMove(orig, dest) {
  // 这里可添加走棋相关逻辑
}
</script>

2. 简化Explorer组件的watch监听（可选优化）
   原watch写法可以简化，直接监听props.fen即可，同时建议给props添加默认初始FEN值，避免初始状态为空：

<template>
<div>fen : {{fen}}</div>
</template>
<script setup>
import { watch } from 'vue';

const props = defineProps({
  fen: {
    type: String,
    // 添加国际象棋初始位置的默认FEN
    default: 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1'
  }
})
// 简化监听写法，同时打印新的FEN值便于调试
watch(props.fen, (newFen) => {
  console.log('new fen:', newFen)
})
</script>

3. 额外验证：确认Board组件的emit触发逻辑
   检查move函数中game.fen()是否能返回有效的FEN字符串，确保emit语句确实被执行到（可以在Board组件的emit前加console.log(game.fen())调试）。

内容的提问来源于stack exchange，提问作者Shoooryuken