Vue jsx обработчики событий

Question

Есть ли какой-либо раздел документации, который разъясняет, почему я должен использовать верблюжий чехол для обработчика кликов, но шашлык для ввода (и все остальное)? Но не для клика, только для клика 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

Однако я до сих пор не знаю, почему кебаб-кейс работает для входного события.

Answer 2

В React jsx привязка события элемента использует случай верблюда: onClick или onMouseDown.

Но в спецификации html привязка событий полностью строчная:onclick или onmousedown.

Таким образом, плагин Babel для React преобразует верблюжий регистр в нижний регистр.

В Vue используется плагин vue jsx, который преобразует jsx в функцию рендеринга vue, не говоря уже о нижнем регистре.

введите описание изображения здесь