将自定义事件与Vue 2和JSX绑定

Question

我想在根标记上绑定自定义事件，而不是在中绑定它mounted()。所以我尝试下面的代码：

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

但是，当我使用Chrome运行它时，我发现它custom-event绑定到DOM，无法使用触发$emit，但是使用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

根据文档中的示例，JSX 事件处理程序应该是驼峰式大小写，而不是短横线大小写，因此请尝试以下操作：

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