How to add native events in vue jsx syntax
Problem Description
Adding a click event (syntax: v-on:click) to the vue-jsx syntax will be executed automatically. I don’t know what went wrong.
problem causes
The click event (syntax: v-on:click) is rendered multiple times in the current jsx rendering function, resulting in multiple automatic executions
problem solved
Add native click event
official grammar
render (h) {
return (
<div
// normal attributes or prefix with on props.
id="foo"
propsOnCustomEvent={
this.customEventHandler}
// DOM properties are prefixed with `domProps`
domPropsInnerHTML="bar"
// event listeners are prefixed with `on` or `nativeOn`
onClick={
this.clickHandler}
nativeOnClick={
this.nativeClickHandler}
// other special top-level properties
class={
{
foo: true, bar: false }}
style={
{
color: 'red', fontSize: '14px' }}
key="key"
ref="ref"
// assign the `ref` is used on elements/components with v-for
refInFor
slot="slot">
</div>
)
}
Notice
Parameters cannot be carried behind the event
onClick={
this.clickHandler(params)} //经测试后，点击事件不生效
nativeOnClick={
this.nativeClickHandler(params)} //经测试后，点击事件不生效