如何在带有 Composition API 和 TSX 模板的 Vue 3 中使用自定义事件处理程序？

问题描述

我正在努力理解应该如何使用 TSX 模板在 Vue 3 中处理自定义事件。

考虑一个简单的父/子应用，其中子向父发送自定义事件：

const Child = defineComponent({
    emits: {
        boom: (x: number) => true,},setup(props,{ emit }) {
        console.log("Child props",props)
        return () => (
            <div onClick={() => emit("boom",123)}>Click me!</div>
        )
    },})

const Parent = defineComponent(() => {
    return () => <Child onBoom={(x) => console.log(`Boom: ${x}`)} />
})

上述功能正常，并且：

在子 setup 中，props 为空（如我所料）。
emit 调用 child 的类型正确（它需要一个数字作为参数传递）。

不幸的是，它不知道如何在 parent 中输入 onBoom：

  Property 'onBoom' does not exist on type 'IntrinsicAttributes & Partial<{}> & Pick<Readonly<{} & {}> & VNodeProps & AllowedComponentProps & ComponentCustomProps,"style" | ... 8 more ... | "class">'.ts(2322)

现在，如果我向 Child 添加 onBoom 属性定义：

const Child = defineComponent({
    props: {
        onBoom: Function as PropType<(x: string) => void>,emits: {
        boom: (x: number) => true,...

然后它仍然可以正常运行，并且父级中的 onBoom 变成了类型，但是：

开发者必须在两个地方重复事件定义。
没有什么能阻止这两个定义不同步。在上面的示例中，您是否注意到我在 x: string 中错误地输入了 x: number 而不是 props.onBoom？
在子 setup 中，props 现在不为空，它是一个具有 onBoom 属性的对象。

我的问题是：使用 Vue 3、Composition API 和 TSX 模板处理自定义事件的“正确”方法是什么？

老实说，我很想忽略整个 emits/emit 机制，并简单地使用 React 风格的回调：

<div onClick={() => props.onBoom?.("five")}>

（目前阻止我的是我知道当我决定使用 SSR 时它可能会损坏，因为这些属性不会水合。）

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

tsx vue-composition-api vue.js vuejs3