Vue 2 및 JSX를 사용하여 사용자 지정 이벤트 바인딩

Vue 2 및 JSX를 사용하여 사용자 지정 이벤트 바인딩

커스텀 이벤트를 바인딩하지 않고 루트 태그로 바인드하고 싶다.mounted()그래서 다음 코드를 시도합니다.

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

하지만 크롬으로 실행해보니custom-event를 사용하여 실행할 수 없는 DOM 에 바인드 되어 있습니다.$emit단,VueJS 2의 템플릿 구문은 다음과 같이 간단하게 실행할 수 있습니다.

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

이 문제에 대해 도와주세요, 고마워요!

파티에는 조금 늦었지만...

이벤트를 트리거하려면 다음과 같이 해야 합니다.

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>
    );
}

문서의 예에 따르면 JSX 이벤트핸들러는 kebab-case가 아닌 camel-case여야 합니다.따라서 다음과 같이 시도해 보겠습니다.

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

커스텀 이벤트가custom-event. 다음 중 하나를 시도합니다.

• onCustom-event
• on-custom-event

https://github.com/vuejs/babel-plugin-transform-vue-jsx/issues/164에서 찾을 수 있습니다.

언급URL : https://stackoverflow.com/questions/43720060/binding-custom-event-with-vue-2-and-jsx