微信小程序，事件传参

事件传参

在小程序中，我们可以通过为组件提供 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- 开头，否则无法被解析为参数。
• 参数名不区分大小写，但在使用时不要混淆大小写，否则可能会出现获取不到参数值的情况。
• 参数的值必须是字符串形式，如果需要传递数字、布尔值等其他类型的数据，需要在事件处理函数中进行类型转换。

运行结果