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

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

事件对象

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


事件对象的作用

  • 拿到触发事件的元素: 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

目录
相关文章
|
1天前
|
小程序 JavaScript
小程序中的数据双向绑定和Vue的有什么区别
小程序中的数据双向绑定和Vue的有什么区别
|
1天前
|
存储 JavaScript 小程序
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据是什么?
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据是什么?
16 0
|
1天前
|
小程序 JavaScript
【微信小程序】-- 自定义组件 - 数据监听器 (三十四)
【微信小程序】-- 自定义组件 - 数据监听器 (三十四)
|
1天前
|
存储 小程序 JavaScript
【微信小程序】-- 自定义组件 -- 数据、方法和属性(三十三)
【微信小程序】-- 自定义组件 -- 数据、方法和属性(三十三)
|
1天前
|
小程序 JavaScript
【微信小程序】之自定义三宫格一行展示row-grid(简单数据看板)
【微信小程序】之自定义三宫格一行展示row-grid(简单数据看板)
|
1天前
|
小程序 JavaScript 前端开发
微信小程序全栈开发中的数据交互与渲染优化
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的数据交互与渲染优化,旨在提升小程序性能和用户体验。数据交互涉及GET、POST、PUT和DELETE请求,优化措施包括使用HTTPS、数据压缩、缓存及限流。渲染优化则涵盖虚拟DOM、减少DOM操作、组件化和模板使用,以及WXSS样式设计和媒体查询。利用性能监控工具可识别并优化性能瓶颈。开发者应综合运用这些策略,持续优化小程序。
|
1天前
|
小程序
【微信小程序】-- 自定义组件 - 数据监听器 - 案例 (三十五)
【微信小程序】-- 自定义组件 - 数据监听器 - 案例 (三十五)
|
1天前
|
小程序
【微信小程序】-- 页面事件 - 上拉触底 - 案例(二十七)
【微信小程序】-- 页面事件 - 上拉触底 - 案例(二十七)
|
1天前
|
JSON 小程序 JavaScript
【微信小程序】-- 页面事件 - 上拉触底(二十六)
【微信小程序】-- 页面事件 - 上拉触底(二十六)
|
1天前
|
JSON 小程序 JavaScript
【微信小程序】-- 页面事件 - 下拉刷新(二十五)
【微信小程序】-- 页面事件 - 下拉刷新(二十五)

热门文章

最新文章