【微信小程序】事件传参的两种方式

文章目录

1.什么是事件传参

事件传参:在触发事件时,将一些数据作为参数传递给事件处理函数的过程,就是事件传参

在微信小程序中,我们经常会在组件上添加一些自定义数据,然后在事件处理函数中获取这些自定义数据,从而完成业务逻辑的开发.

2.data-*方式传参

在组件上 通过 data-*"的方式 定义需要传递的数据,其中*是自定义的属性,例如:<view data-id="100"bindtap="handler"/>然后通过事件对象进行获取自定义数据

示例:

wxml:

html 复制代码
<button bindtap="btuHandler" data-id="1" data-name="zhangsan">事件传参</button>

.js:

js 复制代码
Page({
  btuHandler(e){
      console.log(e);
  },
})

结果:

可以看到有两个地方出现了我们要传递的参数

  • currentTarget: 事件绑定者,也就是指:哪个组件绑定了当前事件处理函数
  • target: 事件触发者,也就是指:哪个组件触发了当前事件处理函数

因为事件绑定者和事件触发者都是同一个组件,因此通过currentTargettarget都能获取到我们传递的数据.

一般来说,搞清楚时间绑定者和事件触发者,就能够正确获取数据了.实在不行还可以直接打印事件对象,进行数据的查看

有点地方需要注意一下,如果要传递的数据的变量名也带-:

例如:

html 复制代码
<button bindtap="btuHandler" data-user-id="1" data-userName="zhangsan">事件传参</button>

注意这里的ata-user-id="1" data-user-name="zhangsan"

⭐user-id变成了userId(小驼峰),userName变成了username(全小写). 这点需要注意

3.mark自定义数据

小程序进行事件传参的时候,除了使用data-*属性传递参数外,还可以 使用 mark 标记传递参数

mark 是一种自定义属性,可以在组件上添加,用于来识别具体触发事件的 target 节点。同时 mark 还可以用于承载一些自定义数据

然后通过事件对象进行获取自定义数据,在组件上使用 mark:自定义属性 的方式将数据传递给事件处理函数,例如:<view mark:id="100"bindtap="handler" />

示例:

wxml:

html 复制代码
<button mark:userid = "1" mark:userName = "zhangsan" bind:tap="markHandler">mark传参</button> 

注意使用mark不能使用user-id(变量名-变量名)的格式传递数据

js:

css 复制代码
Page({
   markHandler(e){
      console.log(e);
      console.log(e.mark.userid);
      console.log(e.mark.userName);
  },
})

运行结果:

另外使用mark方式通过事件对象获取到的是 触发事件的节点 已经 父节点身上所有的 mark 数据

示例:

wxml:

html 复制代码
<view mark:parentid = "2" mark:parentName = "lisi" bind:tap="parentHandler">
    <button mark:userid = "1" mark:userName = "zhangsan" bind:tap="markHandler">mark传参</button> 
</view>

wcss:

css 复制代码
view{
    display: flex;
    height: 200rpx;
    background-color: aqua;
    align-items: center;
}

js:

js 复制代码
Page({
  markHandler(e){
      console.log(e);
  },
  parentHandler(e){
    console.log(e);
  },
})

界面如下:

首先点击蓝色区域,mark数据只有父组件的数据

点击按钮,可以看到父组件和子组件的数据,同时父组件和子组件的绑定事件方法触发了两次

markdata-*很相似,主要区别在于

  • mark 包含从触发事件的节点到根节点上所有的 mark:属性值
  • currentTarget.dataset 或者 target.dataset 只包含事件绑定者 或者 事件触发者那一个节点的 data-*值
相关推荐
流***陌4 小时前
手办盲盒抽赏小程序前端功能设计:兼顾收藏需求与抽赏乐趣
前端·小程序
Tencent_TCB4 小时前
云开发CloudBase AI+实战:快速搭建AI小程序全流程指南
人工智能·ai·小程序·ai编程·云开发
说私域7 小时前
“开源AI大模型AI智能名片S2B2C商城小程序”视角下的教育用户策略研究
人工智能·小程序
2501_9160074710 小时前
提升 iOS 26 系统流畅度的实战指南,多工具组合监控
android·macos·ios·小程序·uni-app·cocoa·iphone
一匹电信狗12 小时前
【MySQL】数据库表的操作
linux·运维·服务器·数据库·mysql·ubuntu·小程序
2501_9159214316 小时前
iOS 应用代上架流程,多工具组合与使用 开心上架 跨平台自动化上传指南
android·ios·小程序·uni-app·自动化·cocoa·iphone
知识分享小能手16 小时前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
Q_Q196328847516 小时前
python+uniapp基于微信小程序的助眠小程序
spring boot·python·小程序·django·flask·uni-app·node.js
韩立学长19 小时前
基于微信小程序的公益捐赠安全平台9hp4t247 包含完整开发套件(程序、源码、数据库、调试部署方案及开发环境)系统界面展示及获取方式置于文档末尾,可供参考。
数据库·微信小程序·小程序
2501_9159184119 小时前
iOS 混淆与 IPA 加固一页式行动手册(多工具组合实战 源码成品运维闭环)
android·运维·ios·小程序·uni-app·iphone·webview