华山资源网

微信小程序中data-key属性之数据传输(经验总结)
网络编程 2024/11/18 佚名
3 1

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

啥是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属性之数据传输(经验总结)

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

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

总结

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com