小程序29-事件穿参-mark 自定义数据

小程序进行事件传参的时候,除了使用 data-*属性 传递参数外,还可以 使用 mark 标记传递参数
mark 是一种自定义属性,可以在组件上添加,用于来识别具体触发事件的 target 节点。同时 mark 还可以用于承载一些自定义数据

在组件上使用 mark:自定义属性 的方式将数据传递给事件处理函数

例如: <view mark:id="100" bindtap="handler" />

然后通过事件对象进行获取自定义数据

可按照以下代码复制尝试:

html 复制代码
<!--pages/cart/cart.wxml-->
<view bindtap="parentHandler" mark:parentid="1" mark:parentname="tom">
<!-- 如果需要使用 mark 进行事件穿参数,需要使用 mark: 自定义属性的方式进行参数传递 -->
  <!-- <button bindtap="btnHandler" mark:id="1" mark:name="tom">按钮</button> -->
  <button mark:id="1" mark:name="tom">按钮</button>
</view>
javascript 复制代码
// pages/cart/cart.js
Page({

  // 按钮绑定的事件处理函数
  btnHandler (e) {
    console.log(e.mark.id)
    console.log(e.mark.name)
  },
  parentHandler (e) {
    // 先点击蓝色区域(不点击按钮)
    // 通过事件对象获取的是 view 身上绑定的数据

    // 先点击按钮(不点击蓝色区域)
    // 通过事件对象获取到的是触发事件的节点 以及 父节点身上所有的 mark 数据
    console.log(e)
  }

})
css 复制代码
/* pages/cart/cart.wxss */

view {
  display: flex;
  height: 300rpx;
  background-color: rgb(231, 116, 22);
  align-items: center;
}
相关推荐
Mintopia5 分钟前
Node.js高级实战:自定义流与Pipeline的高效数据处理 ——从字母生成器到文件管道的深度解析
前端·javascript·node.js
北凉温华7 分钟前
强大的 Vue 标签输入组件:基于 Element Plus 的 ElTagInput 详解
前端
加兵柠檬水11 分钟前
代码输出题,会这些就够了。
前端
Json201131511 分钟前
Gin、Echo 和 Beego三个 Go 语言 Web 框架的核心区别及各自的优缺点分析,结合其设计目标、功能特性与适用场景
前端·golang·gin·beego
樊小肆12 分钟前
实战!从 0 到 1 搭建 H5 AI 对话页面
前端·vue.js
276695829212 分钟前
美团民宿 mtgsig 小程序 mtgsig1.2 分析
java·python·小程序·美团·mtgsig·mtgsig1.2·美团民宿
JiangJiang13 分钟前
揭秘Vue3源码之computed:懒计算与缓存机制全解析
前端·vue.js·面试
阿里云云原生15 分钟前
仅3步!即刻拥有 QwQ-32B,性能比肩全球最强开源模型
前端·云原生
清灵xmf41 分钟前
Vue 3 自定义权限指令 v-action
前端·javascript·vue.js·自定义指令
一棵树长得超出它自己43 分钟前
jmeter if控制器在loop控制器执行结束后执行
前端·jmeter