vue jsx语法中如何添加原生事件

vue jsx语法中如何添加原生事件

问题描述

vue-jsx语法中添加点击事件(语法：v-on:click)会自动执行不知道是哪里出了问题

问题原因

点击事件(语法：v-on:click)在当前jsx渲染函数中被多次渲染导致自动执行多遍

问题解决

添加原生点击事件

官方语法

render (h) {
    
    
  return (
    <div
      // normal attributes or prefix with on props.
      id="foo"
      propsOnCustomEvent={
    
    this.customEventHandler}
      // DOM properties are prefixed with `domProps`
      domPropsInnerHTML="bar"
      // event listeners are prefixed with `on` or `nativeOn`
      onClick={
    
    this.clickHandler}
      nativeOnClick={
    
    this.nativeClickHandler}
      // other special top-level properties
      class={
    
    {
    
     foo: true, bar: false }}
      style={
    
    {
    
     color: 'red', fontSize: '14px' }}
      key="key"
      ref="ref"
      // assign the `ref` is used on elements/components with v-for
      refInFor
      slot="slot">
    </div>
  )
}

注意

事件后面不能携带参数

onClick={
    
    this.clickHandler(params)} //经测试后，点击事件不生效
nativeOnClick={
    
    this.nativeClickHandler(params)} //经测试后，点击事件不生效

更多vue-jsx语法请查看babel-plugin-transform-vue-jsx

跳转github链接