使用Vue 2和JSX绑定自定义事件

Question

我想在根标签上绑定自定义事件，而不是在mounted()中绑定它。因此，我尝试使用以下代码：

render (h) {
  return (
    <div on-custom-event={this.handleCustomEvent}></div>
  )
}

但是当我在Chrome上运行它时，我发现custom-event绑定到了不能使用$emit触发的DOM，但是使用VueJS 2的模板语法很容易做到：

<template>
   <div @custom-event="handleCustomEvent"></div>
</template>

请帮我解决这个问题，谢谢！

Answer 1

开派对有点晚了但是..。

要触发事件，您需要执行以下操作：

protected render(h: any) {
    return (
        <a onClick={(e: any) => this.$emit('test')}>
            {this.$slots.default}
        </a>
    );
}

要收听事件，请执行以下操作：

protected render(h: any) {
    return (
        <NavLink onTest={() => alert('clicked')}>
            <i class='fa fa-bars'></i>
        </NavLink>
    );
}

Answer 2

根据the docs中的示例，JSX事件处理程序应该是驼峰式大小写，而不是kebab大小写，因此尝试如下所示：

render (h) {
  return (
    <div onCustomEvent={this.handleCustomEvent}></div>,
  )
}

Answer 3

假设您的自定义事件是custom-event。尝试以下任一操作：

• onCustom-event
• on-custom-event

我在这里找到了它们：https://github.com/vuejs/babel-plugin-transform-vue-jsx/issues/164