小程序方法 dataset 传参无法获取问题

已于 2022-09-19 16:36:39 修改
阅读量851 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 小程序 文章标签： 小程序
于 2022-09-19 16:33:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Dragon1993vsLong/article/details/126936580
本文介绍在WXML中如何正确使用事件绑定，并详细解释了如何通过不同方式获取传递给事件处理函数的参数，包括在包含多个组件的情况下的最佳实践。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、如果被绑定的组件里面包含有其他组件，如：

 <view  class="dis-flex justify-start align-start" 

           bindtap="jumpToDetail"  data-url="{{1212}}" data-activityId="{{2222}}" >  

            <view class="activity-cover">

              <image class="activity-cover"  mode="scaleToFill"  src="{{activity.imageUrl}}">  </image> 

 </view>  

则需要用 以下属性来获取参数

var dataset = e.currentTarget.dataset; 

如果绑定事件的组件内部没有其他组件可以直接用

var dataset = e.target.dataset;

2、获取参数是，参数名要全部小写，打的 log 如下：

 

【微信小程序】常见问题-解决tabBar不能传参的问题
墨夶的博客
11-26 712
tabBar微信小程序支持自定义tabBar，你可以通过自定义组件来实现tabBar的跳转逻辑，并在跳转时传递参数。通过上述方法，你可以有效地解决微信小程序中tabBar页面跳转不能传递参数的问题。选择哪种方法取决于你的具体需求和应用场景。希望这些方法能帮助你更好地管理页面跳转逻辑，提升用户体验。
微信小程序开发：路由跳转以及传参的使用详情
全沾软贱开发攻城狮
04-15 1万+
微信小程序开发中的大部分知识点和前端开发是一模一样的，就算具体的语法不一样，但是套路都是一样的，可以说微信小程序开发和前端开发使用的知识点基本一致。本篇博文就来分享一下在微信小程序开发中必用的知识点——路由，微信小程序中的路由使用原理和前端JS的路由使用类似，只是具体的使用语法不一样罢了。微信小程序的路由和前端JS的路由性质是一样的，根据路由规则（路径）从一个界面跳转到另外一个界面的规则。
微信小程序事件绑定案例：bind和catch区别、事件对象及自定义dataset数据
前端基地
02-24 922
本文围绕微信小程序展开，介绍了 button 组件及其 bindtap 属性；阐述了事件绑定中 bind 和 catch 的相关内容；讲解了事件对象；还介绍了自定义 dataset 数据，并通过案例分析帮助理解，整体呈现了微信小程序部分组件、属性及数据相关的知识要点。
微信小程序dataset没有任何数据，点击按钮，按钮函数获取不到dataset里面任何值
qq_46506007的博客
06-04 1223
微信小程序dataset没有任何数据，点击按钮，按钮函数获取不到dataset里面任何值。 多选框点击函数获取不到传进来的数据，或者说按钮点击函数获取不到传进来的数据
微信小程序e.currentTarget.dataset获取不到数据的问题
Flyingheart1991的博客
08-14 5070
项目场景： 最近写一个微信小程序，使用抽屉组件，需要获取点击事件数据 问题描述： bindtap=“showModal1” data-target=“Modal” data-personInfo="{{drawerPeople[index]}}"使用e.currentTarget.dataset.personInfo怎么都获取不到数据，找不到原因 <!-- 抽屉 人员列表--> <view class="cu-modal drawer-modal justify-start {{moda
微信小程序 --- e.currentTarget.dataset.id 获取不到值
Eileen_Crystal的博客
03-26 2万+
直接代码 wxml代码片段 &lt;view class='ranksList' wx:for="{{ranksLb}}"&gt; &lt;view class='ranksListName'&gt;&lt;image src='../image/icon-21.png'&gt;&lt;/image&gt;&lt;text&gt;{{item.name}}&lt;/text&g
微信小程序开发笔记 基础篇③——自定义数据dataset，事件触发携带额外信息
01-08 1889
微信小程序开发笔记 基础篇③——自定义数据dataset，事件触发携带额外信息
【微信小程序】事件传参的两种方式
云泽野の编程日记
06-10 3297
事件传参:在触发事件时，将一些数据作为参数传递给事件处理函数的过程，就是事件传参在微信小程序中，我们经常会在组件上添加一些自定义数据，然后在事件处理函数中获取这些自定义数据，从而完成业务逻辑的开发.小程序进行事件传参的时候，除了使用data-*属性传递参数外，还可以 使用 mark 标记传递参数mark 是一种自定义属性，可以在组件上添加，用于来识别具体触发事件的 target 节点。同时 mark 还可以用于承载一些自定义数据然后通过事件对象进行获取自定义数据,在组件上使用mark:自定义属性。
微信小程序实现bindtap等事件传参
10-17
总结来说，微信小程序中的事件参数传递主要是通过`dataset`属性实现的，`bindtap`等事件绑定的函数不会直接接收参数，而是通过`event`对象访问触发事件的组件数据。理解这一机制对于编写交互丰富的微信小程序至关...
【微信小程序】事件传参问题
汪小穆的博客
11-06 1860
前言：微信小程序跟vue.js有很多相似点，也有很多不同点。例如在事件传值上就有很大区别。
微信小程序踩坑----组件自定义属性传值(dataset)
一叶舟遥
08-18 9341
 在组件里定义一个属性data-xx，xx即为自定义的属性名，加上要传入的值。 &lt;block wx:for="{{listData}}" wx:key="{{id}}"&gt; &lt;view class="td"&gt;&lt;text class='edit' bindtap='update' data-userId='{{item.userId}}' data-id='...
uniapp 事件委托 获取不到dataset,并且currentTarget为空
bluemengcom的博客
03-18 918
张三
微信小程序 解决按钮点击后e.currentTarget.dataset为空的方法
Jay_fearless的博客
03-16 2643
点击按钮但返回dataset为空的解决办法
小程序 事件委托给父元素scrollview 获取不到子元素view的绑定的dataset值
LlanyW的专栏
07-05 625
点击事件委托到父元素：scrollview 减少多次循环绑定 ：通过点击事件的dataset判断了点击哪个子元素。常能见到e.target或者e.currentTarget。简单来说，currentTarget就是当前对象，target就是整个对象（包含子元素）。所以当点击某单一组件时，直接获取其data可以用currentTarget，而当该组件被包了一层，事件在父元素，数据在子元素，则需要使用target。
微信小程序通过data-xxx获取不到dataset数据
weixin_44109245的博客
09-14 2159
data-xxx：xxx部分，如果你写了驼峰，实际上小程序在保存的时候，全部给变成小写了，所以你用驼峰接收，接收不到！
解析小程序setData工作原理
qq_43641110的博客
05-13 2590
setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。
微信小程序使用 e.target.dataset 的问题
SonyMa
03-21 6551
实际上直接console.log（e）就能解决问题。e对象中包含两个对象分别是currentTarget和target，而真正的数据包含在currentTarget。这也就是为什么一会有数据一会又undefined的原因。
微信小程序使用e.target.dataset的小bug
热门推荐
让优秀成为一种习惯
10-23 3万+
在微信开发中我们经常会会用到标签中属性的属性值，有时候我们通过 data-* 和 e.target.dateset 来获取属性值会出现一点小bug，即是调用出来的数据是undefined
e.currentTarget.dataset.item.id 为空（微信小程序无师自通九）
刘欣的优快云博客
05-06 899
今天遇到e.currentTarget.dataset.item.id 为空的错误，下面整理一下元素层到代码逻辑层传值取数问题。一、某页面传递数据，当点击编辑按钮时，需要把这个对象的ID，传到其它页面。三、代码层中，我们这样用 e.currentTarget.dataset.按微信小程序官方说明，运行环境分成。二、我们需要在页面元素中定义。，取了ITEM里面的ID。
微信小程序中data传参案例
最新发布
03-30
<think>好的，我需要解决用户关于微信小程序中通过data进行传参的案例或示例代码的问题。首先，用户提到了data传参，这通常是指在小程序页面间传递数据，或者在组件之间传递数据。我需要回忆一下微信小程序的开发文档，以及用户提供的引用内容，看看有没有相关的信息可以整合。 用户给出的引用中有几个相关的点。引用[3]提到了通过URL传参的方式，使用问号分隔路径和参数，参数之间用&连接，例如在navigator组件中的使用。虽然这属于URL传参，但用户现在问的是data传参，可能是指通过事件或组件属性传递数据。这时候需要区分这两种传参方式的不同。 另外，引用[2]展示了使用wx.request进行网络请求，虽然这涉及到数据传输，但可能不是用户所指的data传参。用户的需求更可能是在页面跳转或组件间传递数据时使用data属性，而不是HTTP请求。 接下来，我需要考虑微信小程序中data传参的常见场景。例如，页面跳转时通过options传递数据，或者在组件中通过属性传递数据。这里可能需要分别举例说明。 对于页面跳转传参，通常会使用wx.navigateTo的url参数，并在目标页面的onLoad生命周期函数中获取参数。例如，从页面A跳转到页面B，并传递参数id和name。这种情况下，页面A的js文件中会调用wx.navigateTo，并在url中添加参数，然后在页面B的onLoad中通过options接收。这属于通过URL传参，但用户可能认为这也是data传参的一种，因为数据是通过跳转传递的。 另一种情况是在组件中使用data属性传参。例如，自定义组件中，父组件向子组件传递数据，可以通过properties属性接收。这时候，父组件在wxml中使用子组件标签时，通过属性绑定传递数据，子组件在properties中定义对应的属性来接收。这种情况下，确实是利用data传参的一种方式。 此外，用户可能还涉及到事件传递参数，比如在触发事件时将数据通过event对象传递。例如，点击按钮时，通过data-*属性设置数据，然后在事件处理函数中通过event.currentTarget.dataset获取。这种情况也是常见的data传参方式。 需要根据用户的引用内容来结合回答。例如，引用[3]中的navigator传参属于URL传参，而用户的问题可能更侧重于通过data属性传递，比如在事件或组件中的传参。因此，我需要提供这两种情况的示例代码。 现在需要整理这些情况，并给出对应的代码示例。首先，页面跳转时通过URL传参，然后在目标页面获取，这可能已经被用户了解，但用户可能想了解其他方式。其次，组件间传参，父传子，通过properties。第三，事件处理中的data-*传参。 另外，用户提供的引用[4]提到了安装miniprogram-api-typings，这可能与TypeScript支持有关，但用户的问题不涉及类型定义，所以可能不需要特别提及。 总结一下，用户需要的答案应该包括： 1. 页面跳转时通过URL传参（虽然属于URL传参，但可能被用户认为是data传参的一部分）。 2. 组件间传参，通过properties。 3. 事件处理中通过data-*属性传递参数。 需要分别给出示例代码，并说明如何接收参数。同时，需要确保代码符合微信小程序的开发规范，比如使用正确的API和语法。 例如，页面跳转传参的示例： 在页面A的JS中： wx.navigateTo({ url: '/pages/pageB/pageB?id=123&name=test' }); 在页面B的JS的onLoad中： onLoad(options) { console.log(options.id); // 123 console.log(options.name); // test } 组件传参示例： 父组件WXML： <my-component myData="{{dataList}}"></my-component> 子组件JS中定义properties： properties: { myData: { type: Array, value: [] } } 事件处理传参示例： 在WXML中： <button data-id="123" bindtap="onButtonClick">点击</button> 在JS中： onButtonClick(event) { const id = event.currentTarget.dataset.id; console.log(id); // 123 } 这些示例应该能够覆盖用户的需求。同时，需要检查用户提供的引用是否有其他有用的信息可以整合。比如引用[3]中的navigator传参，可以提到，同时引用[2]中的HTTPS请求可能不相关，但可以忽略。 最后，生成相关问题，可能需要包括组件通信的其他方式，参数的安全性，或不同传参方式的区别等。</think>### 微信小程序通过 data 传参的示例与实现 在微信小程序中，通过 `data` 传参主要有以下场景：**页面跳转传参**、**组件间传参** 和 **事件触发传参**。以下是具体实现方法及示例代码： --- #### 1. 页面跳转传参（URL 参数） 通过 `wx.navigateTo` 或 `navigator` 组件传递参数，目标页面通过 `onLoad` 的 `options` 接收[^3]。 **示例代码：** ```javascript // 页面 A：传递参数 wx.navigateTo({ url: '/pages/pageB/pageB?id=1001&name=test' }); // 页面 B：接收参数 Page({ onLoad(options) { console.log('id:', options.id); // 输出 1001 console.log('name:', options.name); // 输出 test } }); ``` --- #### 2. 组件间传参（父传子） 父组件通过属性绑定传递数据，子组件通过 `properties` 接收[^4]。 **示例代码：** ```html <!-- 父组件 WXML --> <child-component list="{{dataList}}" /> ``` ```javascript // 父组件 JS Page({ data: { dataList: ['A', 'B', 'C'] } }); ``` ```javascript // 子组件 JS（child-component） Component({ properties: { list: { type: Array, value: [] } } }); ``` --- #### 3. 事件触发传参（data-* 属性） 通过 `data-*` 属性绑定参数，事件处理函数中通过 `event.currentTarget.dataset` 获取[^3]。 **示例代码：** ```html <!-- WXML --> <button data-id="1001" bindtap="handleClick">查看详情</button> ``` ```javascript // JS Page({ handleClick(event) { const id = event.currentTarget.dataset.id; console.log('ID:', id); // 输出 1001 } }); ``` --- #### 4. 通过 data 对象直接传参 在页面或组件的 `data` 中定义变量，通过 `setData` 动态更新值： ```javascript Page({ data: { count: 0 }, increment() { this.setData({ count: this.data.count + 1 }); } }); ``` --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值