vue jsx语法中如何添加原生事件
问题描述
vue-jsx语法中添加点击事件(语法:v-on:click)会自动执行不知道是哪里出了问题
问题原因
点击事件(语法:v-on:click)在当前jsx渲染函数中被多次渲染导致自动执行多遍
问题解决
添加原生点击事件
官方语法
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>
)
}
注意
事件后面不能携带参数
onClick={this.clickHandler(params)} //经测试后,点击事件不生效
nativeOnClick={this.nativeClickHandler(params)} //经测试后,点击事件不生效