Vue3组合式API中子组件Emit未触发父组件方法求助

1. 修复父组件事件绑定的语法错误 #

你父组件模板里的事件绑定写法有误，事件名后面不需要额外加括号。把：

<CheckerBoardTile width= 100% id="1" tileId="tile1" @OnTileClicked()="TileClicked('Tile1')"/>

改成：

<CheckerBoardTile width="100%" id="1" tileId="tile1" @OnTileClicked="TileClicked('Tile1')"/>

（另外注意width= 100%最好加上引号，写成width="100%"，符合HTML属性规范）

2. 修正子组件script中的语法错误 #

子组件TileClicked函数里的{{counter.value++}}是Vue模板的插值语法，不能直接用在script代码中，要改成原生JavaScript写法：

const emit = defineEmits(['OnTileClicked'])

function TileClicked() 
{
    counter.value++; // 去掉双大括号
    console.log(props.tileId + " Tile clicked in Child component");
    emit('OnTileClicked');
}

额外提示（非必须但推荐） #

Vue官方推荐事件名使用kebab-case（短横线分隔），比如把子组件的OnTileClicked改成on-tile-clicked，父组件绑定的时候对应写成@on-tile-clicked="TileClicked('Tile1')"，这样更符合Vue的编码规范，也能避免大小写敏感带来的潜在问题。

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