Vue jsx事件处理程序

Question

有没有文档部分澄清了为什么我应该使用camel-case作为点击处理程序，而使用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

在React jsx中，元素-事件绑定使用驼色大小写：onClick或onMouseDown。

但在html规范中，事件绑定是完全小写的：onclick或onmousedown。

所以React babel插件从camel大小写转换为小写。

在Vue中，Vue-jsx插件将jsx转换为Vue-render函数，请注意小写。

在此处输入图像描述

Answer 2

在此处找到一条信息：

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

然而，我仍然不知道为什么烤肉串案例适用于输入事件。