微信小程序-事件传递数据

简介: 小程序在触发事件监听方法的时候会自动传递一个事件对象给我们,通过这个事件对象我们可以拿到页面传递过来的一些数据。

事件对象

小程序在触发事件监听方法的时候会自动传递一个事件对象给我们,通过这个事件对象我们可以拿到页面传递过来的一些数据。


事件对象的作用

  • 拿到触发事件的元素: currentTarget
  • 拿到触发事件的位置: detail
  • 拿到从页面传递过来的数据: dataset/mark

2105804-20230416123707011-1126843295.png

页面传递数据的方法

  • dataset
  • mark


通过 dataset 传递数据:


官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#dataset


在 WXML 中,这些自定义数据以 data- 开头,多个单词由连字符 - 连接。这种写法中,连字符写法会转换成驼峰写法,而大写字符会自动转成小写字符。如:

  • data-element-type ,最终会呈现为 event.currentTarget.dataset.elementType
  • data-elementType ,最终会呈现为 event.currentTarget.dataset.elementtype


dataset 示例:


index.wxml:

<view data-name="BNTang" bind:tap="oneTap">我是view</view>


index.js:

oneTap: function(event){
  console.log('oneTap', event);
  console.log(event.currentTarget.dataset.name);
},


小程序会自动将页面中data-xxx的数据放到事件对象的currentTarget的dataset中。


mark 示例:


index.wxml:

<view mark:name="BNTang" bind:tap="oneTap">我是view</view>


index.js:

oneTap: function(event){
  console.log('oneTap', event);
  console.log(event.mark.name);
},


小程序会自动将页面中mark:xxx的数据放到事件对象的mark属性中。


遗留问题:为什么要有两种传递数据的方式?


!> 涉及到事件冒泡和捕获/涉及到嵌套结构/涉及到currentTarget

目录
相关文章
|
3月前
|
存储 安全 小程序
在微信小程序中使用 Vant 时如何确保数据的安全?
在微信小程序中使用 Vant 时如何确保数据的安全?
50 1
|
2月前
|
小程序 JavaScript 开发工具
|
2月前
|
缓存 小程序 UED
如何利用小程序的生命周期函数实现数据的加载和更新?
如何利用小程序的生命周期函数实现数据的加载和更新?
80 4
|
2月前
|
移动开发 小程序 数据可视化
微信小程序可视化开发工具之动态数据
微信小程序可视化开发工具之动态数据
46 3
|
3月前
|
小程序 开发者
微信小程序之网络数据请求 wx:request的简单使用
这篇文章介绍了微信小程序中如何使用wx.request进行网络数据请求,包括请求的配置、请求的格式以及如何在开发阶段关闭请求的合法检验。
微信小程序之网络数据请求 wx:request的简单使用
|
3月前
|
小程序 JavaScript
微信小程序学习之数据绑定,事件绑定,事件传参与数据同步的学习记录
本文介绍了微信小程序中的数据绑定、事件绑定、事件传参与数据同步的基本概念和使用方法,包括如何在data对象中定义数据、使用mustache语法在wxml中渲染数据、绑定和处理事件、事件对象属性、事件传参以及实现输入框与data数据的同步。
微信小程序学习之数据绑定,事件绑定,事件传参与数据同步的学习记录
|
3月前
|
小程序 JavaScript 开发工具
微信小程序——全局数据共享
微信小程序——全局数据共享
|
3月前
详细教程:扫码提交表单后,数据直接推送到企业微信、钉钉、飞书群聊
在草料制作的表单中,填表人扫码填写并提交数据后,这些信息可以立即通过企业微信、钉钉或飞书自动推送到相应的群聊中,实现即时共享和沟通,提升团队协作效率。
|
3月前
|
JSON 小程序 JavaScript
微信小程序页面事件,下拉刷新事件和上拉触底事件
这篇文章介绍了微信小程序中如何实现下拉刷新和上拉触底事件,包括开启下拉刷新、配置下拉刷新样式、监听下拉刷新事件,以及监听上拉触底事件和配置上拉触底的距离。
|
4月前
|
小程序 JavaScript 前端开发
微信小程序开发时数据是否是双向数据绑定的
微信小程序开发时数据是否是双向数据绑定的