Question

我想在root标记上绑定自定义事件，而不是在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-case，所以尝试类似：

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

Answer 3

假设您的自定义事件为custom-event。请尝试以下任一方法：

onCustom-event
on-custom-event

我在这里找到他们：.NET can retrieve that index from interfaces too

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

3 个答案: