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

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

啥是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中

我们看到，如愿以偿。

那能不能再currentTarget中输出？

准确的说，是：能不能获取currentTarget中的值？
那肯定可以啦！

我们来看官方文档：

从中可以看出一个很严重的问题：当前组件 和 触发事件组件
我们都知道，触发事件有 bindtap 和 catchtap 两种。其中，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']);
 }

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

总结

赞 (0)

相关推荐

  • 微信小程序中正确使用地图的方法实例

    微信小程序中正确使用地图的方法实例

    目录 前言 1. 准备 2. 实战 2.1 配置小程序权限 2.2 封装工具函数 2.2.1 全局函数与变量 2.2.2 工具函数 2.3 跳转选址页面前的处理 2.4 跳转后的处理 2.4.1 页面初始化 2.4.2 搜索功能实现 2.4.3 下滑到底获取更多 2.4.4 提交数据 2.4.5 切换城市 总结 前言 今天是我的小兄弟(微信小程序方面)在工作中遇到的一个场景--选择某个位置周围的学校,感觉很有用,就让他给大家分享一下. 这次想分享一下关于微信小程序中选择全国中的一个学校和地址的方

  • 微信小程序中实现车牌输入功能

    微信小程序中实现车牌输入功能

    目录 前言 背景 大猜想 找规律 结构和样式 组件实现 参数 键盘类型的判断 获取输入内容 组件传参 组件使用 测试 解决键盘类型判断的bug 结束语 组件的代码 使用页面代码 前言 哈哈哈,上新文章啦.好久没有更新啦,今天乘着休息来总结下之前用的到自定义键盘来输入车辆号牌微信组件.下面是效果图,请欣赏: 背景 近期做了一个和车有关的项目,有车肯定就有车牌,我们都知道车牌是有一定规律的,如果简单的给个输入框的话......这里省略一万字哈,从小我的编程老师告诉我不要相信任何用户输入的东西.嗯嗯!

  • 微信小程序中input标签详解及简单实例

    微信小程序中input标签详解及简单实例 使用input标签,我们都会,在微信小程序中使用,必定也是可以一下子就会的,但是却有些常用的属性无法按照习惯去使用: 我就用我最常用的来做例子: 一个一个来解读: 首先,我是定义了他的id,这是我们最常用的,所以就配了一个id,毕竟不操作他,又为什么设成输入框呢, 第二,设置他的样式, 第三,设置他的输入类别,以上都是很简单的 第四.使用正则l:哎限定输入为纯数字.这点可能有点不理解,这是对他的keyup事件监听,将不是纯数字的list无视掉.注意,是对

  • 微信小程序中form 表单提交和取值实例详解

    微信小程序中form 表单提交和取值实例详解 我们知道,如果我们直接给 input 添加 bindinput,比如:<input bindinput="onUsernameInput" />,那么可以在 onUsernameInput 中直接使用 e.detail.value,即: onUsernameInput : function(e) { e.detail.value; } 但是,如果有多个输入控件,我们不可能为每个控件添加 bindinput.bindchange

  • 150行代码带你实现微信小程序中的数据侦听

    在小程序项目中, 我们的通常会使用到使用到一个全局对象作为各个页面通用的数据存储容器, 将它绑定到app对象后, 就能在每一个页面都自由的操纵这个对象. 然而在实践中, 由于这个对象及其属性不具备响应式条件, 它不能直接参与业务逻辑的编写, 能力仅仅局限于数据储存. 若是在VueJS项目中, 我们可能经常使用到 Vue.$watch 去侦听某个数据是否发生变化, 小程序却缺乏这种能力. 在这篇文章中, 我将用150行代码, 手把手带你打造一个小程序也可以使用的侦听器(下简称VX): // 一个快

  • 微信小程序中为什么使用var that=this

    前言: 在小程序或者js开发中,经常需要使用var that = this;开始我以为是无用功,(原谅我的无知),后来从面向对象的角度一想就明白了,下面简单解释一下我自己的理解,欢迎指正批评. 代码示例: Page({ data: { test:10 }, testfun1: function () { console.log(this.data.test) // 10 function testfun2(){ console.log(this.data.test) //undefined }

  • 微信小程序中上传图片并进行压缩的实现代码

    小程序上传图片要先了解他其中的各个属性值,在https://developers.weixin.qq.com/miniprogram/dev/api/media-picture.html内有详细的介绍 今天在这里主要来讲下如何去上传图片并进行压缩,了解下以下属性值 先来看下页面展示(点击上传图片,从相册中选择,上传完图片后又点了一次上传) 来来来,上代码 wxml代码 <button bindtap='chooseImageTap'>上传图片</button> <button

  • 微信小程序中使用wxss加载图片并实现动画效果

    记录微信小程序中使用wxss加载图片并实现动画的方式,最终实现loading效果. 代码 .weui-loading { margin: 0 5px; width: 20px; height: 20px; display: inline-block; vertical-align: middle; animation: a 1s steps(12) infinite; background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bW

  • 微信小程序中转义字符的处理方法

    微信小程序中转义字符的处理方法

    在微信小程序开发过程中,有时候会用到常用的一些特殊字符如:'<'.'>'.'&'.'空格'等,微信小程序同样支持对转义字符的处理,下面提供两种方法用来处理微信小程序中转义字符的处理. 1.官方API调用 这种方式,我们直接在wxml布局文件中,直接调用相关特殊符号的转义字符会无效,原因是小程序的text文本控件的decode属性没有打开导致的,看下文档说明: 从文档中,我们可以发现,decode属性默认为false,不会解析我们的特殊字符,我们通过设置decode属性为true,并且调

  • 微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件

    在微信小程序中,有遇到要展示店铺评分,或者是订单完成后对商品进行评价,用到了星星展示,查了下,在微信中无法使用svg实现图片,微信中只能将svg图片转成base64来显示,所以是在vue中使用的svg来实现评分 1.效果图 微信中的可以点击及显示,但是,显示的话,在4.2分,4点多分的时候,显示的是半颗星 vue中用的是svg实现,所以用的是占比的形式,可以有一点点的星 2.微信实现店铺评分显示及商品评价星星展示 子组件index.wxml,可以动态的控制星星的大小 <!-- (size * s

随机推荐