当前位置：首页 > article >正文

小程序事件系统 —— 34 事件传参 - mark - 自定义数据

article 2025/3/11 0:13:27

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

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

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

下面通过微信开发者工具进行演示：

在 pages/cate/cate.wxml 页面中添加下面代码：

<view>
  <!-- 如果需要使用 mark 进行事件传参，需要使用 mark: 自定义属性的方式进行参数传递 -->
  <button bind:tap="buttonHandler" mark:id="1" mark:name="tom">按钮</button>
</view>

在 pages/cate/cate.scss 中添加下面样式代码：

view {
  display: flex;
  height: 300rpx;
  background-color: skyblue;
  align-items: center;
}

在 pages/cate/cate.js 中的 Page 中添加下面代码：
```
 buttonHandler(event){
   console.log(event)
 }
```
点击刷新，在页面中点击按钮，观察 console 打印的事件信息，可以看到在一级位置可以看到 mark 传递的数据信息，如下：

我们再来看另外一种方式（和上一节内容进行对比），修改一下代码：

在 pages/cate/cate.wxml 页面中添加下面代码：

<view bind:tap="parentHandler" mark:parentid="1" mark:parentname="tom">
  <!-- 如果需要使用 mark 进行事件传参，需要使用 mark: 自定义属性的方式进行参数传递 -->
  <button mark:id="1" mark:name="tom">按钮</button>
</view>

在 pages/cate/cate.js 中的 Page 中添加下面代码：
```
parentHandler (event) {
	console.log(event)
}
```
先点击蓝色区域，在 console 输出中观察一下事件对象，mark 中可以获取 view 本身传递的数据，如下所示：

清空控制台信息，点击按钮，在 console 输出中看一下事件对象中的 mark，可以发现里面有四个数据，分别为 view 和 button 中绑定的数据，通过事件对象获取到的是当前 button 节点和父节点上所有的 mark 数据，如下：