小程序28-事件传参-data-*自定义数据

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

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

在组件上 通过 data-* 的方式定义需要传递的数据，其中*是自定义的属性

例如：<view data-id="100" bindtap="handler">

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

注意事项：

1. event.target 是指事件触发者，event.currentTarget是指事件绑定者
2. 使用 data- 方法传递参数的时候，多个单词由连字符，连字符写法会转换成驼峰写法
3. 使用 data- 方法传递参数时，而大写字符会自动转成小写字符

可以按照以下代码复制操作下：

<view bindtap="parenHandler" data-parent-id="1" data-parentname="tom">
  <!-- 如果需要进行事件穿参，需要在组件上通过 data- 的方式传递数据 -->
  <!-- <button bindtap="btnHandler" data-id="1" data-name="tom">按钮</button> -->
  <button data-id="1" data-name="tom">按钮</button>

</view>

// pages/cate/cate.js
Page({

    // 按钮触发的事件处理函数
    // currentTarget 事件绑定者，也就是指：哪个组件绑定了当前事件处理函数
    // target 事件触发者，也就是指：哪个组件触发了当前的事件处理函数
    // currentTarget 和 target 都是指按钮，因为是按钮绑定了事件处理函数，同时点击按钮触发事件处理函数
    // 这时通过谁来获取数据都可以
    btnHandler (e) {
      console.log(e.currentTarget.dataset.id)
      console.log(e.target.dataset.name)
    },
    parenHandler (e) {
      // 点击蓝色区域（不点击按钮）
      // currentTarget 事件绑定者：view
      // target 事件触发者：view
      // currentTarget 和 target 都是指 view，如果想获取 view 身上的数据，使用谁都可以

      // 点击按钮（不点击蓝色区域）
      // currentTarget 事件绑定者：view
      // target 事件触发者：按钮
      // 如果想获取 view 身上的数据，必须使用 currentTarget 才可以
      // 如果想获得的是事件触发者本身的数据，就需要使用 target
      console.log(e)

      //注意事项：在传递参数时，如自定义属性时多个单词，单词与单词直接使用中划线 - 进行连接
      //在事件对象中会被转换成小驼峰写法
      console.log(e.currentTarget.dataset.parentId)
    }

})

/* pages/cate/cate.wxss */

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