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

【问题标题】：Binding custom event with Vue 2 and JSX使用 Vue 2 和 JSX 绑定自定义事件
【发布时间】：2017-05-01 13:39:59
【问题描述】：

我想在根标签上绑定自定义事件，而不是在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>

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

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案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>
    );
}

【讨论】：

发射器和监听器之间如何传递和捕获数据？我正在尝试这个。$emit('test', 'testdata').......onTest={(data) => {alert(data);}}.....但是，它不起作用。

【解决方案2】：

根据the docs 中的示例，JSX 事件处理程序应该是驼峰式的，而不是烤肉式的，所以试试这样的：

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

【讨论】：

感谢您的回答！但是我已经知道了，我的问题是当我将click 替换为一些非本地事件时，它会直接绑定到DOM。我想要实现的就像this.$on('custom-event', this.customEventHandler) 会做。

【解决方案3】：

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

onCustom-event
on-custom-event

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

【讨论】：