微信小程序中data-key属性之数据传输(经验总结)


Posted in Javascript onAugust 22, 2020

本文是总结的一点经验之谈

啥是data-key

微信小程序推出 data- 属性——自定义属性,为了更好的进行数据传递。
总结来说,data-key="{{...}}" 是获取页面中需要用的数据,往js文件(事件)中传—— 被绑定在其组件上的事件使用 也就是常说的:dataset;(比如:wx:for的view中的每一个项的name属性值)
data-key="..." 是从data传到wxml页面中,一般都是在data中存在的属性才这样做,它就是为了“动态修改”data中的属性。

  • 只有data-*传的值才能在事件中被dataset接收,其余的“{{}}”只能使用
  • detaildata-*中不带{{}}时一般都是写好的值,只是用作:不必用data中的数据!

怎么接收data-*的值

如下:

<view bindtap="SetData" data-name="mxc" data-age="18">
 获取数据
</view>

js中:

Page({
 data:{
 name:'',
 age:0
 },
 SetData:function(e){
 console.log(e);
 this.setData({
  name:e.target.dataset.name
 });
 console.log(this.data.name);
 }
})

下面来说几点问题:

上面的程序,在控制台输出:data中的值在event.target.dataset中

微信小程序中data-key属性之数据传输(经验总结)

我们看到,如愿以偿。

那能不能再currentTarget中输出?

准确的说,是:能不能获取currentTarget中的值?
那肯定可以啦!

我们来看官方文档:

微信小程序中data-key属性之数据传输(经验总结)

从中可以看出一个很严重的问题:当前组件触发事件组件
我们都知道,触发事件有 bindtapcatchtap 两种。其中,bindtap可向上(父组件)传递事件
明白了吧?
一般来说, 要想更精确,就用currentTarget;要在一个大组件中有多个触发事件,就可以用target减少事件定义

说说data-绑定数据的坑

你如果在wxml中这么写

<view bindtap='like' data-id='{{laugh.id}}' data-createdBy='{{laugh.created_by}}'>

然后在js中接收:

like(e){
 console.log(e.currentTarget.dataset['createdBy']);
 }

是会出大问题的:它报undefined!

在组件中可以定义数据,这些数据将会通过事件传递给 SERVICE。 书写方式: 以data-开头,多个单词由连字符-链接,不能有大写(大写会自动转成小写)如data-element-type,最终在 event.currentTarget.dataset 中会将连字符转成驼峰elementType。

也就是说小程序自动转了,会把下划线转为大写,大写转为小写。。。(不知道坑了多少人)

like(e){
 console.log(e.currentTarget.dataset['createdby']);
 }

改过之后,世界一片清净…

总结

Javascript 相关文章推荐
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
Jul 13 Javascript
js中将字符串转换成json的三种方式
Jan 12 Javascript
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
js复制到剪切板的实例方法
Jun 28 Javascript
JavaScript实现文字与图片拖拽效果的方法
Feb 16 Javascript
jQuery Ajax实现跨域请求
Jan 21 Javascript
微信小程序动态的加载数据实例代码
Apr 14 Javascript
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
AngularJS select设置默认值的实现方法
Aug 25 Javascript
vue组件初学_弹射小球(实例讲解)
Sep 06 Javascript
使用jQuery实现购物车
Oct 29 jQuery
Vue的过滤器你真了解吗
Feb 24 Vue.js
Vue 电商后台管理项目阶段性总结(推荐)
Aug 22 #Javascript
vue实现移动端H5数字键盘组件使用详解
Aug 25 #Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
Aug 21 #Javascript
js实现页面导航层级指示效果
Aug 25 #Javascript
js实现拖拽元素选择和删除
Aug 25 #Javascript
基于vue实现简易打地鼠游戏
Aug 21 #Javascript
vue实现打地鼠小游戏
Aug 21 #Javascript
You might like
解决中英文字符串长度问题函数
2007/01/16 PHP
国外比较好的几个的Php开源建站平台小结
2010/04/22 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
PHP设计模式之 策略模式Strategy详解【对象行为型】
2020/05/01 PHP
Javascript this 的一些学习总结
2012/08/31 Javascript
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
JS获取时间的方法
2015/01/21 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
2016/06/07 Javascript
javascript中setAttribute兼容性用法分析
2016/12/12 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
如何从零开始利用js手写一个Promise库详解
2018/04/19 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
vue component 中引入less文件报错 Module build failed
2019/04/17 Javascript
vue中input的v-model清空操作
2019/09/06 Javascript
跨平台python异步回调机制实现和使用方法
2013/11/26 Python
python3用PIL把图片转换为RGB图片的实例
2019/07/04 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
python读取Kafka实例
2019/12/23 Python
解决pycharm每次打开项目都需要配置解释器和安装库问题
2020/02/26 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
自我鉴定200字
2013/10/28 职场文书
5.1手机促销活动
2014/01/17 职场文书
黄河象教学反思
2014/02/10 职场文书
《掌声》教学反思
2014/02/23 职场文书
材料会计岗位职责
2014/03/06 职场文书
2015出纳试用期工作总结
2014/12/12 职场文书
会计主管岗位职责
2015/04/02 职场文书
小学英语课教学反思
2016/02/15 职场文书
如何使JavaScript休眠或等待
2021/04/27 Javascript
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL