微信小程序：事件传参

在微信小程序日常开发中，特定场景下我们需要事件携带参数到要执行的函数中，但是又因为小程序的事件传参方式有所不同，并不能在绑定事件后，在事件名称后面加括号携带参数。

小程序绑定事件，默认双引号内的都是事件名称，所以这时我们要想在微信小程序实现事件传参的话，可以使用 data-* 自定义属性名来进行传参。

可以为组件提供 data-* 自定义属性传参，其中 * 代表的是参数的名字

比如： 

代码如下（wxml）： 

<view>
  <view class="center">{
   
   { num }}</view>
  <button bindtap="add" data-num="{
   
   {5}}">点击加 5 </button>
</view>

可以看到，代码中定义了点击事件 add，通过自定义属性 data-num 完成传参，参数是 5 ；其中 num 就是参数的名称。

那么，如何获取事件携带的参数呢？

在事件处理函数中，通过 event.target.dataset.参数名，即可获取到具体参数的值

 代码如下（js）：

扫描二维码关注公众号，回复： 14832070 查看本文章

data: {
    num: 0
},
add(e) {
    console.log(e)
    this.setData({
        num: this.data.num + e.target.dataset.num
    })
},

打印整个事件可以看到通过自定义属性 data-num 所携带的参数 5。

 这时候就可以在方法中通过 e.target.dataset.num 来使用传递过来的参数了。

实例：

 页面是简单的数据渲染加一个点击按钮，实现通过点击按钮触发事件并携带参数，操作参数来修改数据，从而达到图片上的效果。