在微信小程序日常开发中,特定场景下我们需要事件携带参数到要执行的函数中,但是又因为小程序的事件传参方式有所不同,并不能在绑定事件后,在事件名称后面加括号携带参数。
小程序绑定事件,默认双引号内的都是事件名称,所以这时我们要想在微信小程序实现事件传参的话,可以使用 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):
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 来使用传递过来的参数了。
实例:
页面是简单的数据渲染加一个点击按钮,实现通过点击按钮触发事件并携带参数,操作参数来修改数据,从而达到图片上的效果。