Vue jsx 事件处理程序

Question

是否有任何文档部分阐明了为什么我应该为点击处理程序使用驼峰式大小写，但为输入（以及其他所有内容）使用 kebab？但不适用于点击，只有点击 onClick 有效。

实际上我注意到，对于普通输入，两个选项都可以正常工作 on-input 或 onInput。

const MyJSXInput = {
  props: {
    value: {
      type: Boolean,
      required: true
    },
    clickHandler: {
      type: Function,
      required: true
    },
    inputHandler: {
      type: Function,
      required: true
    },
  },
  // eslint-disable-next-line no-unused-vars
  render(createElement) {
    const { value, clickHandler, inputHandler } = this.$props
    return (
      <input onClick={clickHandler} on-input={inputHandler} type="checkbox" value={value} />
    )
  }
}

不知道这是否重要，但我将此组件用作另一个组件的渲染函数道具。像这样（全部简化）：

    renderProp: () => (
      <MyJSXInput 
        value={someValue}
        click-handler={this.someHandlerClick}
        input-handler={this.someHandlerInput}
      />
    )

最后这个组件有这样的东西：

  render(h) {
    return (
      <div>
        {this.$props.renderProp(this)}
      </div>
    )
  }

Answer 1

在这里找到了一条信息：

https://github.com/vuejs/babel-plugin-transform-vue-jsx#difference-from-react-jsx

但是我仍然不知道为什么 kebab case 对输入事件有效。

Answer 2

在 React jsx 中，元素事件绑定使用驼峰式大小写：onClick 或 onMouseDown.

但在 html Specification 中，事件绑定是完全小写的：onclick 或 onmousedown.

所以 React babel 插件从驼峰式转换为小写式。

在Vue中，vue jsx plugin将jsx转换为vue渲染函数，注意小写。

enter image description here

Vue jsx 事件处理程序

Vue jsx event handlers

vue.js

vuejs2

jsx

dom-events

vue-events