I want to bind custom event on root tag instead of binding it in mounted(). So I try the following code:
render (h) {
return (
<div on-custom-event={this.handleCustomEvent}></div>
)
}
But when I run it with Chrome, I found that custom-event was bound to DOM which cannot be fired using $emit, but with VueJS 2's template syntax it is easy to do:
<template>
<div @custom-event="handleCustomEvent"></div>
</template>
Please help me on this problem, thanks!
A little bit late for the party but...
To trigger the event you need to something like:
protected render(h: any) {
return (
<a onClick={(e: any) => this.$emit('test')}>
{this.$slots.default}
</a>
);
}
To listen to the event:
protected render(h: any) {
return (
<NavLink onTest={() => alert('clicked')}>
<i class='fa fa-bars'></i>
</NavLink>
);
}
According to example in the docs, the JSX event handler should be camel-case, not kebab-case, so try something like:
render (h) {
return (
<div onCustomEvent={this.handleCustomEvent}></div>,
)
}
click to some non-native event, it will directly bind to DOM. What I want to achieve is like this.$on('custom-event', this.customEventHandler) will do.Suppose your custom event is custom-event. Try either one of the following:
onCustom-eventon-custom-eventI found them here: https://github.com/vuejs/babel-plugin-transform-vue-jsx/issues/164
