欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  互联网

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

程序员文章站 2022-03-14 20:09:02
前言有时候,我们需要在小程序的视图组件上绑定一个函数,而且需要 传递参数。小程序在组件上绑定事件后,传递参数的方式不同于前端开发其他场景中直接加参数的方式,小程序在参数的传递时,采用 事件对象的自定义属性 的方式,具体实现如下:示例WXML:data-flag:即为绑定在事件对象上的属性。...

前言

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

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

示例


WXML:

<!-- 点击事件(带data数据 参数) -->
<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)//参数
  }
})

这样参数就传过来了。

本文地址:https://blog.csdn.net/weixin_44198965/article/details/107591993

相关标签: + Wechat