小程序事件系统 —— 33 事件传参 - data-*自定义数据

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

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

在组件上通过 data-* 定义需要传递的数据，其中 * 是自定义的属性，例如：<view data-id="100" bindtap="handler" />，代码中的 id 就是自定义的属性，属性值 100 是需要传递的数据，然后通过事件对象获取自定义的数据；

下面打开微信开发者工具演示一下事件传参的使用步骤，在演示完后讲解一下相关的注意事项：

• 在 pges/cate/cate.wxml 文件中添加下面代码：

  <view>
    <button bind:tap="btnHandler" data-id="1" data-name="tom">按钮</button>
  </view>

  绑定事件 btnHandler，自定义 id 和 name 数据；

• 在 pages/cate/cate.js 文件中定义 btnHandle 事件处理函数：

    btnHandler(event){
      console.log(event)
    }

• 在 pages/cate/cate.scss 文件中定义一下 view 的样式：

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

在页面中点击按钮，在 console 中可以看到打印的事件对象信息，如下：

打开事件对象，可以看到在 currentTarget 和 target 中都能看到传递的数据信息，如下：

这时候我们需要了解一下 currentTarget 和 target 的区别是什么：

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

在这个例子中，currentTarget 的事件绑定者是 btn 按钮，target 的事件触发者也是 btn 按钮；

接下来看一下 currentTarget 和 target 不是指向同一个组件的情况：

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

<view bind:tap="parentHandler" data-parentid="1" data-parentname="tom">
  <button data-id="1" data-name="tom">按钮</button>
</view>

• 在 pages/cate/cate.js 中添加下面代码：

 parentHandler (event) {
   console.log(event)
 }

刷新重新运行，清空 console 区域，点击按钮周围的蓝色区域（注意不要点击按钮），观察 console 打印的事件对象信息，如下：

可以看到，在打印的事件对象中，currentTarget 获得的数据是 parentid 和 parentname，可以知道当前的事件绑定者是 view，如下：

同样，target 获取的数据也是 parentid 和 parentname，可以知道当前事件的触发者也是 view，如下：

下面点击按钮（注意不要点击按钮外的蓝色区域），观察 console 打印的事件数据，可以发现，currentTarget 绑定的数据是 view 对应的自定义数据，如下：

再看一下 target 的数据，可以看到 target 中绑定的数据是 button 中对应的自定义数据，因为这里是点击按钮触发的事件，所以 target 的数据为 button 中定义的数据，如下：

接下来讲解一下两个注意事项：

• 假如事件在传递参数的时候，自定义属性是由多个单词来组成的，单词与单词之间使用中划线(-)来分隔，获取事件对象的数据的时候需要使用驼峰格式，比如上面的 parentid 和 parentname 修改为中划线格式，如下：

  <view bind:tap="parentHandler" data-parent-id="1" data-parent-name="tom">
    <button data-id="1" data-name="tom">按钮</button>
  </view>

  使用中划线命名属性之后，我们在开发者模式中看一下如何获取对应的数据属性，打开 console 模式，点击按钮，在打印的数据中可以看到，对应的属性名变为了驼峰命名写法，如下：

  

  在定义数据的时候，使用的是中划线，在获取数据的时候，使用驼峰格式；

  因此我们需要注意，当使用中划线命名单词的时候，获取事件对象的数据需要使用驼峰格式获取数据；

• 假如事件在传递参数的时候，自定义参数使用驼峰命名，在获取事件对象的数据的时候，需要使用全小写的格式，如下：

  

简单对上面的内容进行总结：

• 事件传参使用 data-* 的格式；
• event.currentTarget 是指事件绑定者，event.target 是指事件触发者；
• 使用 data- 方法传递参数时，多个单词由中划线-连接时，获取事件数据时需要使用驼峰写法；
• 使用 data- 方法传递参数时，多个单词由驼峰写法定义时，获取事件数据时需要使用全小写格式；

参考视频：尚硅谷微信小程序开发教程