Vue3 Child Emits 不在父级中触发（组合）答案

【问题标题】：Vue3 Child Emits not firing in parent (Composition)Vue3 Child Emits 不在父级中触发（组合）
【发布时间】：2022-11-12 04:55:35
【问题描述】：

我是 vue 的新手，并试图了解孩子和父母之间的事件是如何运作的。

我创建了一个子组件，它在脚本设置中公开了一个发射：


const emit = defineEmits(['OnTileClicked'])

function TileClicked() 
{
    {{counter.value++}}
    console.log( props.tileId + " Tile clicked in Child component");
    emit('OnTileClicked');
}

这被调用，我可以在控制台中看到消息。

我的父母我的模板中有以下内容

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

以及脚本设置中的以下内容

const totalClickCount = ref(100);

function TileClicked(name) 
{
  totalClickCount.value++; 
  console.log(name + ' Clicked Detected Total:' + totalClickCount.value);
}

但这不会被调用。

感谢您的帮助

达兰


Would expect parent function to be called when child event is fired

【问题讨论】：

标签： typescript vuejs3

【解决方案1】：

你快到了，但是你的处理程序语法有点错误。

试试这个（没有'（）'）

<CheckerBoardTile @OnTileClicked="TileClicked('Tile1')" />

作为旁注，如果你想发出一个值，然后处理它，你可以这样写。

emit("myEvent", 123);

<MyComponent @myEvent="(n) => count += n" />

或者，如果您的事件处理程序是一个方法，则该值将在该方法的第一个参数中传递。

<MyComponent @myEvent="myHandler" />

function myHandler(n) {
    ...
}

参考：

https://vuejs.org/guide/components/events.html

【讨论】：