小程序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;
}
相关推荐
LeeAt5 分钟前
真的!真的就一句话就能明白this指向问题
前端·javascript
阳火锅6 分钟前
都2025年了,来看看前端如何给刘亦菲加个水印吧!
前端·vue.js·面试
hahala233323 分钟前
ESLint 提交前校验技术方案
前端
夕水1 小时前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
我麻烦大了1 小时前
实现一个简单的Vue响应式
前端·vue.js
独立开阀者_FwtCoder1 小时前
你用 Cursor 写公司的代码安全吗?
前端·javascript·github
Cacciatore->1 小时前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~1 小时前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo1 小时前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
贵沫末1 小时前
React——基础
前端·react.js·前端框架