小程序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 才可以// 如果想获得的是事件触发者本身的数据，就需要使用 targetconsole.log(e)//注意事项：在传递参数时，如自定义属性时多个单词，单词与单词直接使用中划线 - 进行连接//在事件对象中会被转换成小驼峰写法console.log(e.currentTarget.dataset.parentId)}})

/* pages/cate/cate.wxss */view {display: flex;height: 300rpx;background-color: skyblue;align-items: center;
}