微信小程序中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 相关文章推荐
一些易混淆且不常用的属性,希望有用
Jan 29 Javascript
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
Apr 15 Javascript
在JS中最常看到切最容易迷惑的语法(转)
Oct 29 Javascript
编写针对IE的JS代码两种编写方法
Jan 30 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
Dec 28 Javascript
jQuery实现微信长按识别二维码功能
Aug 26 Javascript
自制微信公众号一键排版工具
Sep 22 Javascript
Bootstrap导航条学习使用(二)
Feb 08 Javascript
vue-resouce设置请求头的三种方法
Sep 12 Javascript
小程序根据手机机型设置自定义底部导航距离
Jun 04 Javascript
在Chrome DevTools中调试JavaScript的实现
Apr 07 Javascript
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
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
PHP 一个比较完善的简单文件上传
2010/03/25 PHP
PHP与MongoDB简介|安全|M+PHP应用实例详解
2013/06/17 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
php注册审核重点解析(数据访问)
2017/05/23 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
jQuery实现类似滑动门切换效果的层切换
2013/09/23 Javascript
采用call方式实现js继承
2014/05/20 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
node thread.sleep实现示例
2018/06/20 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
2018/07/11 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
vue打开其他项目页面并传入数据详解
2020/11/25 Vue.js
python中子类调用父类函数的方法示例
2017/08/18 Python
python3.4.3下逐行读入txt文本并去重的方法
2018/04/29 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
浅谈python标准库--functools.partial
2019/03/13 Python
PyCharm专业最新版2019.1安装步骤(含激活码)
2019/10/09 Python
python列表切片和嵌套列表取值操作详解
2020/02/27 Python
python使用建议技巧分享(三)
2020/08/18 Python
Python实现Appium端口检测与释放的实现
2020/12/31 Python
100%法国制造的游戏和玩具:Les Jouets Français
2021/03/02 全球购物
大众服装店创业计划书范文
2014/01/01 职场文书
教师业务学习制度
2014/01/25 职场文书
致跳远运动员加油稿
2014/02/11 职场文书
公司财务流程之主管工作流程
2014/03/03 职场文书
电焊工岗位职责
2014/03/06 职场文书
演讲主持词
2014/03/18 职场文书
租车协议书范本2014
2014/11/17 职场文书
2014年移动公司工作总结
2014/12/08 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
提取视频中的音频 Python只需要三行代码!
2021/05/10 Python