事件传参:在触发事件时,将一些数据作为参数传递给事件处理函数的过程,就是事件传参
在微信小程序中,我们经常会在组件上添加一些自定义数据,然后在事件处理函数中获取这些自定义数据,从而完成业务逻辑的开发
在组件上 通过 data-* 的方式定义需要传递的数据,其中*是自定义的属性
例如:<view data-id="100" bindtap="handler">
然后通过事件对象进行获取自定义数据
注意事项:
- event.target 是指事件触发者,event.currentTarget是指事件绑定者
- 使用 data- 方法传递参数的时候,多个单词由连字符,连字符写法会转换成驼峰写法
- 使用 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;
}