微信小程序事件传参

微信小程序事件传参

        • 微信小程序怎么事件传参
          • dataset 对象
          • 事件对象
          • 目标对象
        • 总结、两步骤

微信小程序怎么事件传参

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属性
微信小程序事件传参_第1张图片
它就是当前触发事件的目标对象,那么获取到当前触发事件的目标对象之后,我们就可以通过它获取它身上的一些信息,例如:dataset 对象。
我们打印下 dataset 对象:
在这里插入图片描述
可以看到,我们已经拿到了当前点击元素身上绑定的 data-id 的值了,也正是我们想要得到的值。

总结、两步骤

  • 设置要传递的参数

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

  • 事件函数中获取参数

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

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

你可能感兴趣的:(微信小程序,javascript,前端,小程序,vue.js)