微信小程序中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 相关文章推荐
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
Nov 27 Javascript
javascript调试说明
Jun 07 Javascript
jQuery 回调函数(callback)的使用和基础
Feb 26 Javascript
javascript实现继承的简单实例
Jul 26 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
Sep 06 Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
使用vue实现grid-layout功能实例代码
Jan 05 Javascript
JQuery的加载和选择器用法简单示例
May 13 jQuery
JS函数动态传递参数的方法分析【基于arguments对象】
Jun 05 Javascript
解决layui的table插件无法多层级获取json数据的问题
Sep 19 Javascript
通过实例了解Render Props回调地狱解决方案
Nov 04 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
php学习 字符串课件
2008/06/15 PHP
PHP Squid中可缓存的动态网页设计
2008/09/17 PHP
PHP用身份证号获取星座和生肖的方法
2013/11/07 PHP
php动态生成版权所有信息的方法
2015/03/24 PHP
php获取远程文件内容的函数
2015/11/02 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
PHP使用函数用法详解
2018/09/30 PHP
HTML中事件触发列表与解说
2007/07/09 Javascript
js chrome浏览器判断代码
2010/03/28 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
Jquery 插件开发笔记整理
2011/01/17 Javascript
js实现select跳转功能代码
2014/10/22 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
使用JS实现图片展示瀑布流效果的实例代码
2016/09/12 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
实例解析angularjs的filter过滤器
2016/12/14 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
详解JavaScript中分解数字的三种方法
2021/01/05 Javascript
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
Python实现批量压缩图片
2018/01/25 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
哪种Python框架适合你?简单介绍几种主流Python框架
2020/08/04 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
python3实现简单飞机大战
2020/11/29 Python
《夹竹桃》教学反思
2014/04/20 职场文书
社会学专业求职信
2014/07/17 职场文书
派出所班子党的群众路线对照检查材料思想汇报
2014/10/01 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书
python 制作一个gui界面的翻译工具
2021/05/14 Python
详解Vue的options
2021/05/15 Vue.js
使用redis实现延迟通知功能(Redis过期键通知)
2021/09/04 Redis