微信小程序事件传参

本文介绍了如何在微信小程序中通过dataset对象进行事件传参,包括设置data-属性、事件对象获取、以及利用currentTarget获取目标元素的dataset。关键步骤包括绑定事件和解析事件对象数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

微信小程序怎么事件传参
dataset 对象

每个虚拟dom身上都拥有一个dataset对象
给虚拟 dom 绑定上 data-自定义键=“值”的这种属性,例如:
想要传一个id:

<view wx:for-index="index" wx:for-item="item" wx:for="{{list}}"
 bindtap="bindtap" data-id="{{item.id}}"></view>

绑定上此种格式的属性后,会被去除 data- ,然后以键值对的形式添加在虚拟 dom 身上的dataset 对象身上。

事件对象

事件函数都默认拥有一个形参,实参为事件对象。

  bindtap(e){
    //e 为事件对象
    console.log(e)
  },
目标对象

目标对象指的是事件对象下的一个对象,为 currentTarget 属性。
以下是事件对象的 console.log 控制台打印结果,可以看到确实拥有一个 currentTarget属性
在这里插入图片描述
它就是当前触发事件的目标对象,那么获取到当前触发事件的目标对象之后,我们就可以通过它获取它身上的一些信息,例如:dataset 对象。
我们打印下 dataset 对象:
在这里插入图片描述
可以看到,我们已经拿到了当前点击元素身上绑定的 data-id 的值了,也正是我们想要得到的值。

总结、两步骤
  • 设置要传递的参数

通过给虚拟 dom 绑定 data-key=“value” 这样的语法为当前虚拟 dom 中的 dataset 对象中添加数据

  • 事件函数中获取参数

事件对象 ===》目标对象 ===》dataset对象 ===》参数
从事件对象获取>目标对象,从目标对象获取 dataset对象,从 dataset 对象中获取参数
e.currentTarget.dataset.XXX

到这里就结束了,拜拜ヾ(•ω•`)o

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值