美文网首页
微信小程序 bindtap等事件传参

微信小程序 bindtap等事件传参

作者: 阿杰_96c5 | 来源:发表于2020-05-03 14:29 被阅读0次

    视图页面定义参数

    在标签中定义 data- 开头的属性 比如 data-customer-No="00520200429173446467"

    标签中绑定点击事件 bindtap="onDetail"

    js 页面他通过 onDetail方法 获取参数

     onDetail(e){
            console.log(e);
            let customerNo =  e.currentTarget.dataset.customerNo;
            console.log("customerNo",customerNo);
      }
    

    控制台结果:

    image-20200503142339240.png

    注意事项:

    1、data-名称 不能有大写字母,如果需要,可以通过 - (中划线)来连接单词,编译的时候小程序会将第二个单词首字母自动大写。图中代码是为了自己标志,所以第二个单词的首字母大写了,其实可以不用。data-* 属性中不可以存放对象。

    2、注意打印结果中target和currentTarget的区别。

    target 触发事件的源组件。
    currentTarget 事件绑定的当前组件。

    如果你在父容器上绑定了事件并传参,当你点击父容器时,事件绑定的组件和触发事件的源组件是同一个元素,所以currentTarget 、target 都可以拿到参数,但是当你点击子元素时,target 就不是事件绑定的组件了,所以拿不到参数。
    由于事件冒泡的机制,父容器上绑定的事件依然可以触发,所以currentTarget 依然可以拿到参数

    相关文章

      网友评论

          本文标题:微信小程序 bindtap等事件传参

          本文链接:https://www.haomeiwen.com/subject/tlmdghtx.html