Vue jsx 事件处理程序答案

【问题标题】：Vue jsx event handlersVue jsx 事件处理程序
【发布时间】：2018-11-21 14:02:13
【问题描述】：

是否有任何文档部分阐明了为什么我应该使用驼峰式大小写作为点击处理程序，而使用烤肉串作为输入（以及其他所有内容）？但不适用于点击，仅点击 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>
    )
  }

【问题讨论】：

标签： vue.js vuejs2 jsx dom-events vue-events

【解决方案1】：

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

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

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

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

enter image description here

【讨论】：

【解决方案2】：

在这里找到一条信息：

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

但是我仍然不知道为什么 kebab case 适用于输入事件。

【讨论】：