微信小程序——数据传递（子传父）

最新推荐文章于 2024-01-27 11:26:02 发布
原创 最新推荐文章于 2024-01-27 11:26:02 发布 · 1.3k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序

这篇博客介绍了如何在JavaScript中通过this.triggerEvent方法设置并触发自定义事件，以实现组件间的通信。事件参数通过对象传递，例如index: index。在父组件中，可以使用binditemChange来监听并处理这些自定义事件，从而在父级js文件中接收到传递的数据，进行进一步的操作。

一、设置自定义事件，触发时传递数据

通过this.triggerEvent（）设置。该方法两个参数，第一个为自定义的事件名字，第二个是数据，数据通过对象的格式传递
这里的对象用了简写的形式，展开为index：index
在这里插入图片描述

二、在父级引用的组件身上绑定自定义的事件

binditemChange=“handleItemChange”
bind自定义的事件名=“自定义一个处理函数”
在这里插入图片描述

三、在父级js文件中处理自定义事件，接收数据

在这里插入图片描述
在这里插入图片描述

微信小程序——分页组件的创建与使用
不迁怒，不贰过。小知识，大智慧。
06-21 5424
一、创建 pagination 分页组件 1、前端页面 pagination.wxml 代码分享 2、样式 pagination.wxss 代码分享 3、逻辑 pagination.js 代码分享 二、使用 pagination 分页组件
微信小程序子组件向父组件传递数据
qq_44866810的博客
08-13 2685
。当用户点击子组件中的按钮时，子组件会触发一个名为 customEvent 的事件，并附带一些数据。父组件监听这个事件，并在其方法 handleClickFromChild 中处理这些数据。
微信小程序父传子和子传父
halouKti的博客
04-12 654
1.父传子 父组件向子组件传值：{{}}里面的是传给组件的变量 menuList="{{menuList}}" 子组件接收并使用 子组件直接使用父子组件传过来值 2. 标题子传父 1.在子组件中定义一个方法 2.在子组件的js文件夹中使用this.triggerEvent给父组件传值 3.在父组件中绑定传过来的事件名 4.在父组件的js文件夹中获取子组件传过来的数据 ...
【微信小程序开发】 自定义组件 子组件传父组件 父组件传子组件
悟空—
03-27 364
场景：多个页面使用 UI画面基本一致 举个栗子：拿多个页面 都有搜索框 点击跳搜索页面 实施： 创建公用组件页面search search.wxml <view class="search"> <view class="search-inputView flex-align-center"...
微信小程序——子传父
qq_45794805的博客
03-25 1006
this.triggerEvent()这是个方法，别乱搞，可以去查看文档。（本篇前提，已经将子组件在父组件中通过标签的形式展示出来）触发事件（点击按钮），即可获得子组件传递给父组件的信息。然后在父组件 wxml 中就可以显示出信息了。（这里的lists是子组件）dadaccept 随意命名。
微信小程序自定义组件子传父详解（多图）
qq_49438920的博客
03-11 1600
微信小程序自定义组件子传父详解 前言： 刚开始为了测试父传子，所以把页面的数组放在了父组件中 1. 然而子组件中绑定的自定义点击事件依然放在子组件的js文件中 2. 所以就会出现我们点击页面的文字能改变其样式却不能改变父组件的数据，因为子组件本身只能修改自己的数据，子组件修改了自己的数据后只能把新值传递到自身data{}里面，父组件数据并不受影响 3. 此时为了能使父元素中的数据改变，我们必须让子组件向父组件传递数据，我们希望被点击的isactive属性变化，故我们只需要获取点击的元素索引即可 我
微信小程序——前端传递数据data-index
奔跑的狮子
08-15 7435
HTML <!-- data-index给js传数据 --> <view class="menu_item {{index === currentIndex?'active':''}}" wx:for="{{leftMenuList}}" wx:key="*this" bindtap="handleItemTap" data-index="{{index}}" > JS //{index}是es6的解构方
微信小程序——[娱乐搞笑类]笑话（截图+源码）.zip
04-17
开发者可能使用了WXML（微信小程序的结构语言）来编写页面结构，WXSS（微信小程序的样式语言）来定制视觉样式，而JavaScript则用于处理业务逻辑和数据交互。源码中可能包含了以下几个关键组件： 1. `app.js`：小...
微信小程序——[小工具类]二维码生成器（截图+源码）.zip
04-17
3. **数据绑定**：掌握微信小程序的双向数据绑定机制，通过`data`属性在JavaScript和WXML之间传递数据。 4. **API调用**：理解并应用微信小程序的API，如调用`wx.qrcode`接口生成二维码。这个接口通常需要传入一个...
微信小程序组件Components——父向子传递和子向父传递数据的过程
weixin_45390688的博客
01-22 2097
前言：组件是微信小程序在开发过程中一个非常重要的知识，可以化简我们的代码复用及编写，但是组件也是相对来说比较难以理解的一个概念，用法也比较纠结，本篇博文将具体介绍组件的基本使用方法 一、简单了解 组件的创建其实和页面很像，其实就是把多个标签通过一定的逻辑整合到了一起形成组件 这是组件的所需文件，可以看出和页面很像，当然也有些不同 比如在json配置文件中多了 “component”: true的内容 { "component": true, "usingComponents": {} } 在js
微信小程序组件通信子传父
hfdxmz_3的博客
08-07 1246
小程序 - 组件通信 - 子传父，代码如下： // 第一步：通过自定义事件的方式通知父组件 // components/music/index.js Component({ /** * 组件的属性列表 */ properties: { name: String, type: String }, methods: { onMusic () { /* *第一步：通过自定义事件的方式通知父组件 triggerEve.
【微信小程序---子组件传值给父组件】
m0_56349322的博客
02-22 4743
点击原创或者分类虽然样式如首页一样变化，但是其父组件的最终isActive的值并未发生改变，但是样式发生改变是因为拿取的是Component>里面的properties中的tabs，你点击下去的时候一样拿取tabs数组，所以不会报错。因此子组件必须通过方法进行修改父组件中的isActive的值，方法如下： components/Tabs/Tabs.js 点击事件触发父组件中自定义事件 同时传递数据给 父组件 this.triggerEvent("父组件自定义事件的名称"，要传递的参数)...
微信小程序----子值传父
python_web全栈
02-21 3927
1. 子 1.1 html <view> <view class="item" wx:for="{{ topic_list }}" wx:key="index" bindtap="topicItem" data-item="{{ item }}"> <text>#{{ item.id }} {{ item.name }}</text> <text>人数：{{ item.people_num }}</text>
微信小程序 - 组件子传父 - 19
qq_25906119的博客
01-15 654
微信小程序 - 子传父
微信小程序（十九）组件通信（子传父）
https://github.com/amoorzheyu
01-27 924
注释很详细，直接上代码……
微信小程序子传父
weixin_50964329的博客
10-09 133
父组件： //html代码 <chose-time bind:myevent="onMyEvent"></chose-time> <!--js代码 --> onMyEvent(e) { this.setData({ time: e.detail.time }) }, 子组件 <!-- html --> <van-datetime-picker value="{{ currentDate }}" bind:i
基于小程序子传父案例
m0_64992579的博客
11-11 369
通过this.triggerEvent来实现子传父
微信小程序子页面向父页面传值
lijiamingyyds的博客
05-18 1420
有更优化的方法欢迎指点
微信小程序——人脸识别
最新发布
04-16
通过调用微信小程序提供的API，可以获取用户上传的照片数据，并将其传递给人脸识别算法进行处理。具体流程包括图片的选择、特征提取以及最终的结果返回[^3]。 以下是一个简单的代码示例，用于展示如何利用微信小...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值