事件传参
在小程序中,我们可以通过为组件提供 data-*
自定义属性来实现事件传参,并在事件处理函数中获取该参数的值。
示例代码
<button type="primary" bindtap="btnHandler" data-info="{{2}}">
事件传参</button>
这里,我们在 button
组件上添加了一个 data-info
属性,并将其值设为 2
,表示传递了一个名为 info
的参数,值为 2
。
在事件处理函数 btnHandler
中,我们可以通过 event.target.dataset
获取到所有通过 data-*
传递过来的参数项,例如:
btnHandler(event) {
console.log(event.target.dataset) // 输出 { info: "2" }
}
通过打印 event.target.dataset
,我们可以看到它是一个对象,包含了所有通过 data-*
传递过来的参数项及其对应的值。
我们也可以通过 event.target.dataset.参数名
的方式获取到具体参数的值,例如:
console.log(event.target.dataset.info) // 输出 "2"
综合测试
// 页面的 .js 文件
Page({
data: {
count: 0
},
btnHandler(event) {
console.log(event.target.dataset) // 输出 { info: "2" }
console.log(event.target.dataset.info) // 输出 "2"
this.setData({
count: this.data.count + event.target.dataset.info
})
}
})
注意事项
data-*
自定义属性必须以data-
开头,否则无法被解析为参数。- 参数名不区分大小写,但在使用时不要混淆大小写,否则可能会出现获取不到参数值的情况。
- 参数的值必须是字符串形式,如果需要传递数字、布尔值等其他类型的数据,需要在事件处理函数中进行类型转换。
运行结果