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

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

    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适用于输入事件。

Vue jsx事件处理程序

1 个答案: