小程序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;
}
相关推荐
来自星星的坤1 小时前
Vue 3中如何封装API请求:提升开发效率的最佳实践
前端·javascript·vue.js
vvilkim2 小时前
全面解析React内存泄漏:原因、解决方案与最佳实践
前端·javascript·react.js
vvilkim2 小时前
React批处理(Batching)更新机制深度解析
前端·javascript·react.js
Bayi·2 小时前
前端面试场景题
开发语言·前端·javascript
程序猿熊跃晖3 小时前
Vue中如何优雅地处理 `<el-dialog>` 的关闭事件
前端·javascript·vue.js
进取星辰3 小时前
12、高阶组件:魔法增幅器——React 19 HOC模式
前端·javascript·react.js
拉不动的猪3 小时前
前端低代码开发
前端·javascript·面试
程序员张33 小时前
Vue3集成sass
前端·css·sass
夜跑者4 小时前
axios 在请求拦截器中设置Content-Type无效问题
前端
知识分享小能手4 小时前
JavaScript学习教程,从入门到精通,Ajax与Node.js Web服务器开发全面指南(24)
开发语言·前端·javascript·学习·ajax·node.js·html5