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

文章目录

  • 1.什么是事件传参
  • 2.data-*方式传参
  • 3.mark自定义数据

1.什么是事件传参

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

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

2.data-*方式传参

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

示例:

wxml:

<button bindtap="btuHandler" data-id="1" data-name="zhangsan">事件传参</button>

.js:

Page({btuHandler(e){console.log(e);},
})

结果:
在这里插入图片描述
可以看到有两个地方出现了我们要传递的参数

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

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

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

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

例如:

<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:

<button mark:userid = "1" mark:userName = "zhangsan" bind:tap="markHandler">mark传参</button> 

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

js:

Page({markHandler(e){console.log(e);console.log(e.mark.userid);console.log(e.mark.userName);},
})

运行结果:
在这里插入图片描述
另外使用mark方式通过事件对象获取到的是 触发事件的节点 已经 父节点身上所有的 mark 数据

示例:

wxml:

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

wcss:

view{display: flex;height: 200rpx;background-color: aqua;align-items: center;
}

js:

Page({markHandler(e){console.log(e);},parentHandler(e){console.log(e);},
})

界面如下:
在这里插入图片描述
首先点击蓝色区域,mark数据只有父组件的数据
在这里插入图片描述
点击按钮,可以看到父组件和子组件的数据,同时父组件和子组件的绑定事件方法触发了两次
在这里插入图片描述

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

  • mark 包含从触发事件的节点到根节点上所有的 mark:属性值
  • currentTarget.dataset 或者 target.dataset 只包含事件绑定者 或者 事件触发者那一个节点的 data-*值

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/348714.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

毕业年薪20w起!25届最近5南京邮电大学自动化考研院校分析

南京邮电大学 目录 一、学校学院专业简介 二、考试科目指定教材 三、近5年考研分数情况 四、近5年招生录取情况 五、最新一年分数段图表 六、历年真题PDF 七、初试大纲复试大纲 八、学费&奖学金&就业方向 一、学校学院专业简介 二、考试科目指定教材 1、考试…

点云格式转化:将 ros PointCloud2格式数据转为livox CustomMsg格式

前言 览沃科技有限公司&#xff08;Livox&#xff09;成立于2016年。为了革新激光雷达行业&#xff0c;Livox致力于提供高性能、低成本的激光雷达传感器。通过降低使用门槛和生产成本&#xff0c;Livox将激光雷达技术集成到更多产品和应用之中&#xff0c;从而为自动驾驶、智慧…

数据挖掘丨轻松应用RapidMiner机器学习内置数据分析案例模板详解(下篇)

RapidMiner 案例模板 RapidMiner 机器学习平台提供了一个可视化的操作界面&#xff0c;允许用户通过拖放的方式构建数据分析流程。RapidMiner目前内置了 13 种案例模板&#xff0c;这些模板是预定义的数据分析流程&#xff0c;可以帮助用户快速启动和执行常见的数据分析任务。 …

AI “黏土画风”轻松拿捏,手把手带你云端部署 ComfyUI

作者&#xff1a;鸥弋、筱姜 AI 绘画领域&#xff0c;Stable Diffusion WebUI、Midjourney 、DALL-E 都聚拢了一大批的应用开发者和艺术创作者。ComfyUI 出现时间略晚&#xff0c;但是它让创作者通过工作流的方式&#xff0c;实现自动化水平更高的 AI 生图流程&#xff0c;一面…

ISO17025认证是什么?怎么做?

ISO17025认证是一种国际通用的实验室质量管理体系认证&#xff0c;其目标是确保实验室的技术能力、管理水平以及测试结果的可靠性和准确性达到国际认可的标准。该认证由国际标准化组织&#xff08;ISO&#xff09;和国际电工委员会&#xff08;IEC&#xff09;联合发布&#xf…

不停“整活”的零食很忙,怎么就跨入万店时代了?

6月12日&#xff0c;合并后的零食很忙、赵一鸣零食宣布&#xff0c;全国门店总数已突破10000家。同时&#xff0c;集团名称也变更为鸣鸣很忙集团。根据第三方机构弗若斯特沙利文认证&#xff0c;鸣鸣很忙集团全国门店数位居零食连锁行业第一。 在此之前&#xff0c;尽管零食很…

Photoshop 2024 mac/win版:探索图像处理的全新境界

Photoshop 2024是Adobe推出的最新图像处理与设计软件&#xff0c;它在继承了前作所有优秀特性的基础上&#xff0c;实现了多个方面的质的飞跃。这款软件凭借其卓越的图像处理性能、丰富的创意工具以及精确的选区编辑功能&#xff0c;成为了图像处理领域的佼佼者。 Photoshop 2…

Spring的循环依赖

循环依赖概述 循环依赖其实也很好理解&#xff0c;可以将这个词拆分成两部分&#xff0c;一个是循环&#xff0c;一个是依赖。循环&#xff0c;顾名思义就是指形成了一个闭合环路&#xff0c;也就是闭环。依赖就是指某个事件的发生要依赖另一个事件。 在Spring中的循环依赖就…

CTFHUB-SQL注入-Cookie注入

由于本关是cookie注入&#xff0c;就不浪费时间判断注入了&#xff0c;在该页面使用 burp工具 抓包&#xff0c;修改cookie后面&#xff0c;加上SQL语句&#xff0c;关掉burp抓包&#xff0c;就可以在题目页面显示结果了 判断字段数量 发现字段数量是2列 使用id-1 union sele…

NewStarCTF_RE(week1,2)

[NewStarCTF 2023 公开赛道]easy_RE ida 可能会把 一个数组或字符串拆开&#xff0c;可以通过计算地址&#xff0c;知道是一起的 也有的会藏在汇编窗口 Segments IDA的Segments窗口 &#xff1a;shiftf7 https://www.cnblogs.com/sch01ar/p/9477697.html ida 各种窗口也是需要…

Prometheus监控系统

目录 一、Prometheus简介 1.Prometheus概念 ①Prometheus概念 ②监控通知流程 ③监控系统的数据产生流程 ④zabbix和prometheus 区别 ⑤TSDB 作为 Prometheus 的存储引擎完美契合了监控数据的应用场景 &#xff12;.Prometheus的基础组件 ①如何采集数据exporter组件 …

PgSQL技术内幕 - psql与服务端连接与交互机制

PgSQL技术内幕 - 客户端psql与服务端连接与交互机制 简单来说&#xff0c;PgSQL的psql客户端向服务端发起连接请求&#xff0c;服务端接收到请求后&#xff0c;fork出一个子进程&#xff0c;之后由该子进程和客户端进行交互&#xff0c;处理客户端的SQL等&#xff0c;并将结果返…

Python第二语言(八、Python包)

目录 1. 什么是Python包 2. 创包步骤 2.1 new包 2.2 查看创建的包 2.3 拖动文件到包下 3. 导入包 4. 安装第三方包 4.1 什么是第三方包 4.2 安装第三方包-pip 4.3 pip网络优化 1. 什么是Python包 包下有__init__.py就是包&#xff0c;无__init__.py就是文件夹。于Ja…

Linux常用基本命令-操作

目录 一、shell 1、什么是shell 二、Linux基本的命令分类 1、内部命令和外部命令 2、查看内部命令 2.1、help命令 2.2、enable 命令 2.3、type命令 2.4、whereis命令 2.5、which 命令 2.6、hash缓存 ​编辑 三、Linux常用命令 1、Linux命令格式 2、编辑Linux命…

FRP 内网穿透 | 实现远程访问与安全管理

唠唠闲话 内网穿透简介 在互联网上&#xff0c;两个不同主机进行通信需要知道对方的 IP 地址。由于世界人口和设备众多&#xff0c;IPv4 资源相对紧缺&#xff0c;因此绝大部分情况下是通过路由器或交换机转换公网 IP 后才上网。 位于路由器或交换机后的设备通常是内网设备&…

Chroium 源码目录结构分析(1):源码目录体积一栏

获取源码 首先&#xff0c;我们拉一份最新的源代码&#xff08;笔者是2024.6.6日拉取的&#xff09;&#xff1a; fetch --nohistory chromium 源码预处理 如果运行build&#xff0c;会生成许多生成的代码&#xff0c;因此我们不运行build。 然后&#xff0c;把干扰后续分析…

docker拉取镜像失败超时的解决方法,docker配置国内镜像源

更换国内源 创建或修改 /etc/docker/daemon.json 文件 安装docker后一般只有 /etc/docker 这个目录 下面并没有 daemon.json 文件 我们直接创建 &#xff1a; vim /etc/docker/daemon.json {"registry-mirrors" : ["https://registry.docker-cn.com"…

【redis】redis事务

目录 Redis事务四个命令redis事务特性redis事务执行原理 Redis 事务的使用基本使用watch 监控watch 实现原理补充 Redis事务 Redis事务是一种将多个命令打包成一个单独操作的机制&#xff0c;它保证了在执行这些命令期间&#xff0c;其他命令无法插入。 四个命令 Redis事务通…

基于Java+SpringBoot制作一个软考助手答题小程序

基于Java+SpringBoot制作一个软考小助手考试答题小程序。其中系统前端功能包括注册登录、公告通知、考试答题、视频课程、考试记录、题库、题目评论、错题统计、我的收藏和用户信息管理模块;系统后台功能包括用户管理、题库管理、答题管理、学习视频管理以及系统管理模块。 摘…

VRRP基础配置(华为)

#交换设备 VRRP基础配置 VRRP (Virtual Router Redundancy Protocol) 全称是虚拟路由规元余协议&#xff0c;它是一种容错协议。该协议通过把几台路由设备联合组成一台虚拟的路由设备&#xff0c;该虚拟路由器在本地局域网拥有唯一的一个虚拟 ID 和虚拟 IP 地址。实际上&…