微信小程序 - 在视图组件上绑定函数并携带参数(事件对象自定义属性传参)

前言

有时候,我们需要在小程序的视图组件上绑定一个函数,而且需要 传递参数

小程序在组件上绑定事件后,传递参数的方式不同于前端开发其他场景中直接加参数的方式,小程序在参数的传递时,采用 事件对象的自定义属性 的方式,具体实现如下:

示例


WXML:


<button bindtap="test" data-flag="{{ flag }}">按钮button>
  • data-flag:即为绑定在事件对象上的属性(可自定义:data - *),注意获取时的名称。
  • {{ flag }}:即为自身 data 身上的数据

JavaScript:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    flag: '参数'
  },
  
  /**
   * 页面的初始数据
   */	
  test: function(e) {//e为参数

    // 参数(从事件对象上依次 点(.) 到我们绑定的属性)
    let data = e.currentTarget.dataset.flag

    // 测试打印
    console.log(data)//参数
  }
})

这样参数就传过来了。

你可能感兴趣的:(+,Wechat)