微信小程序:事件传参

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

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

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

比如: 

微信小程序:事件传参_第1张图片

代码如下(wxml): 


  {{ num }}
  

可以看到,代码中定义了点击事件 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

微信小程序:事件传参_第2张图片

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

实例:

微信小程序:事件传参_第3张图片微信小程序:事件传参_第4张图片

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

你可能感兴趣的:(微信小程序,微信小程序,小程序)