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

最新推荐文章于 2024-08-13 11:29:48 发布
最新推荐文章于 2024-08-13 11:29:48 发布
阅读量1.2k 收藏 6
点赞数
CC 4.0 BY-SA版权
分类专栏： 微信小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Willow_Spring/article/details/117848936

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

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

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

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

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

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

微信小程序——分页组件的创建与使用
不迁怒，不贰过。小知识，大智慧。
06-21 5285
一、创建 pagination 分页组件 1、前端页面 pagination.wxml 代码分享 2、样式 pagination.wxss 代码分享 3、逻辑 pagination.js 代码分享 二、使用 pagination 分页组件
微信小程序组件Components——父向子传递和子向父传递数据的过程
weixin_45390688的博客
01-22 2066
前言：组件是微信小程序在开发过程中一个非常重要的知识，可以化简我们的代码复用及编写，但是组件也是相对来说比较难以理解的一个概念，用法也比较纠结，本篇博文将具体介绍组件的基本使用方法 一、简单了解 组件的创建其实和页面很像，其实就是把多个标签通过一定的逻辑整合到了一起形成组件 这是组件的所需文件，可以看出和页面很像，当然也有些不同 比如在json配置文件中多了 “component”: true的内容 { "component": true, "usingComponents": {} } 在js
微信小程序父传子和子传父
halouKti的博客
04-12 632
1.父传子 父组件向子组件传值：{{}}里面的是传给组件的变量 menuList="{{menuList}}" 子组件接收并使用 子组件直接使用父子组件传过来值 2. 标题子传父 1.在子组件中定义一个方法 2.在子组件的js文件夹中使用this.triggerEvent给父组件传值 3.在父组件中绑定传过来的事件名 4.在父组件的js文件夹中获取子组件传过来的数据 ...
微信小程序——子传父
qq_45794805的博客
03-25 986
this.triggerEvent()这是个方法，别乱搞，可以去查看文档。（本篇前提，已经将子组件在父组件中通过标签的形式展示出来）触发事件（点击按钮），即可获得子组件传递给父组件的信息。然后在父组件 wxml 中就可以显示出信息了。（这里的lists是子组件）dadaccept 随意命名。
微信小程序组件通信子传父
hfdxmz_3的博客
08-07 1224
小程序 - 组件通信 - 子传父，代码如下： // 第一步：通过自定义事件的方式通知父组件 // components/music/index.js Component({ /** * 组件的属性列表 */ properties: { name: String, type: String }, methods: { onMusic () { /* *第一步：通过自定义事件的方式通知父组件 triggerEve.
【微信小程序---子组件传值给父组件】
m0_56349322的博客
02-22 4687
点击原创或者分类虽然样式如首页一样变化，但是其父组件的最终isActive的值并未发生改变，但是样式发生改变是因为拿取的是Component>里面的properties中的tabs，你点击下去的时候一样拿取tabs数组，所以不会报错。因此子组件必须通过方法进行修改父组件中的isActive的值，方法如下： components/Tabs/Tabs.js 点击事件触发父组件中自定义事件 同时传递数据给 父组件 this.triggerEvent("父组件自定义事件的名称"，要传递的参数)...
微信小程序子组件向父组件传递数据
qq_44866810的博客
08-13 2520
。当用户点击子组件中的按钮时，子组件会触发一个名为 customEvent 的事件，并附带一些数据。父组件监听这个事件，并在其方法 handleClickFromChild 中处理这些数据。
微信小程序——视图层
sssuan的博客
03-15 2819
小程序框架的视图层由WXML（微信标记语言）与WXSS（微信样式表）编写，由组件来进行展示。视图层负责将逻辑层的数据显示在页面上，同时将视图层的事件发送给逻辑层。WXML用来描述页面的结构，WXSS用于描述页面的样式，组件是视图的基本组成单元。这三者的关系可以类比为HTML，CSS与HTML里面各种标签的关系。除了这三者之外，还有一套用于小程序的脚本语言——WXS（WeiXin Script）。WXS和WXML结合起来，可以构建出页面结构。
微信小程序——[娱乐搞笑类]笑话（截图+源码）.zip
04-17
开发者可能使用了WXML（微信小程序的结构语言）来编写页面结构，WXSS（微信小程序的样式语言）来定制视觉样式，而JavaScript则用于处理业务逻辑和数据交互。源码中可能包含了以下几个关键组件： 1. `app.js`：小...
微信小程序——[小工具类]二维码生成器（截图+源码）.zip
04-17
3. **数据绑定**：掌握微信小程序的双向数据绑定机制，通过`data`属性在JavaScript和WXML之间传递数据。 4. **API调用**：理解并应用微信小程序的API，如调用`wx.qrcode`接口生成二维码。这个接口通常需要传入一个...
微信小程序----子值传父
python_web全栈
02-21 3905
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 625
微信小程序 - 子传父
微信小程序（十九）组件通信（子传父）
不起眼小菜菜的博客
01-27 886
注释很详细，直接上代码……
微信小程序子传父
weixin_50964329的博客
10-09 116
父组件： //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 355
通过this.triggerEvent来实现子传父
微信小程序子页面向父页面传值
lijiamingyyds的博客
05-18 1390
有更优化的方法欢迎指点
微信小程序中的父子传参方式
super_juanzai的博客
09-14 1285
1. 在父组件中引用子组件2.在子组件的json中，把自己定义为子组件3. 在父组件中，子组件的引用处，绑定一个属性( text )，并传递想要给子组件的值( parentParam )4. 在子组件中的js中使用 properties 获取值，这样就可以在子组件中用 this.data.text 获取到这个值了。
微信小程序自定义组件子传父详解（多图）
qq_49438920的博客
03-11 1541
微信小程序自定义组件子传父详解 前言： 刚开始为了测试父传子，所以把页面的数组放在了父组件中 1. 然而子组件中绑定的自定义点击事件依然放在子组件的js文件中 2. 所以就会出现我们点击页面的文字能改变其样式却不能改变父组件的数据，因为子组件本身只能修改自己的数据，子组件修改了自己的数据后只能把新值传递到自身data{}里面，父组件数据并不受影响 3. 此时为了能使父元素中的数据改变，我们必须让子组件向父组件传递数据，我们希望被点击的isactive属性变化，故我们只需要获取点击的元素索引即可 我
微信小程序原生父传子并且监听它
最新发布
04-28
### 微信小程序父组件向子组件传递数据并监听数据变化 在微信小程序中，父组件可以通过属性绑定的方式向子组件传递数据。为了实现父组件向子组件传递数据的同时能够监听数据的变化，可以采用以下方法。 #### 数据传递与监听机制 父组件通过 `properties` 属性将数据传递到子组件中[^1]。当父组件中的数据发生变化时，子组件会自动更新其对应的属性值。这种行为依赖于微信小程序内置的响应式机制[^2]。 以下是具体实现： --- #### 父组件代码示例 ```html <!-- Parent.wxml --> <view class="parent"> <view>这是父组件</view> <!-- 向子组件传递名为 'message' 的数据 --> <child id="childComponent" message="{{parentMessage}}"></child> </view> ``` ```javascript // Parent.js Page({ data: { parentMessage: "来自父组件的消息" }, // 修改父组件的数据以测试子组件是否能实时更新 changeParentMessage() { this.setData({ parentMessage: "父组件消息已更改" }); } }); ``` --- #### 子组件代码示例 ##### 定义子组件接受的属性 在子组件的配置文件中声明它可以从父组件接收哪些属性，并设置默认值。 ```json { "component": true, "usingComponents": {} } ``` ```javascript // child.js Component({ properties: { message: { // 接收父组件传递过来的 'message' type: String, // 类型为字符串 value: "", // 默认值为空字符串 observer(newVal, oldVal) { // 当 'message' 发生变化时触发此函数 console.log("父组件传入的新值:", newVal); console.log("旧值:", oldVal); // 可在此处执行其他操作，比如更新内部状态或重新渲染界面 } } }, methods: { // 如果需要主动通知父组件某些事件发生，则可使用 triggerEvent 方法 notifyParent(data) { this.triggerEvent('customEvent', { detail: data }); } } }); ``` ##### 子组件模板 展示接收到的数据。 ```html <!-- Child.wxml --> <view class="child"> <view>这是子组件</view> <view>{{message}}</view> <!-- 动态显示从父组件获取的内容 --> </view> ``` --- #### 关键点解析 1. **父组件向子组件传递数据**：通过 WXML 中的标签属性完成，例如 `<child message="{{parentMessage}}">` 表明将当前页面上的变量 `parentMessage` 赋予子组件作为它的初始参数。 2. **监听数据变化**：利用子组件内的 `observer` 函数来捕获由父级改变而引发的任何变动[^3]。每当指定 property 值被修改时都会调用该回调函数。 3. **双向通信扩展能力**：虽然本案例主要讨论单方向（即父亲 -> 孩子）的信息流动过程；但是实际开发过程中往往还需要考虑反向反馈路径的设计——也就是让孩子们也具备汇报自己状况的能力给长辈们知道。这通常借助自定义事件体系达成目标，正如前面提到过的那样，运用 `triggerEvent()` 实现这一目的[^2]。 --- ### 注意事项 - 确保所有涉及跨层交互的地方都遵循官方文档推荐的最佳实践模式； - 对外部输入做充分校验处理以免引入潜在安全隐患或者逻辑错误风险； - 尽量减少不必要的复杂度保持项目结构清晰易维护。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值