微信小程序 自定义组件和父子组件的传参

最新推荐文章于 2025-02-13 20:17:19 发布
原创 最新推荐文章于 2025-02-13 20:17:19 发布 · 1k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序 #自定义组件 #组件传参

本文介绍了微信小程序中如何创建自定义组件，包括新建目录结构、编写组件模板和样式，以及重点讲解了父子组件之间的参数传递，包括父组件向子组件传参和子组件向父组件回调传参。此外，还提到了其他微信小程序相关教程链接。

一. 新建目录结构

1.在 pages 同级目录下，新建 components 文件夹，用于存放不同的组件
在这里插入图片描述
2.新建组件文件夹，名称和功能对应
在这里插入图片描述
3.右键选择 “新建组件”，输入名称，自动生成四种类型的文件
在这里插入图片描述

二. 自定义组件

1.在需要使用自定义组件页面的 json 文件中添加引用
在这里插入图片描述
2.在自定义组件的 wxml 文件中编写组件模版
在这里插入图片描述
wxml：

<!--components/position-list/position-list.wxml--&
最低0.47元/天 解锁文章
微信小程序如何实现组件之间的数据传递？
知码客
08-20 1194
通过以上方法，你可以在微信小程序中实现组件之间的数据传递。选择合适的数据传递方式可以提高代码的可维护性和可读性。父组件可以通过设置子组件的属性（properties）来传递数据。子组件可以通过触发自定义事件（events）来向父组件传递数据。
微信小程序进阶(1)--自定义组件
囦不在地球的博客
05-27 1320
自定义组件
微信小程序自定义组件及传参
weixin_49875932的博客
11-21 769
父组件 bind+事件名='回调方法' 进行接收，并在回调方法中可以获得传递的参数。子组件 使用 this.triggerEvent('事件名',参数)进行传参。3.使用组件，在需要引用组件的页面json配置中引入组件。1.新建文件夹，然后右键选择新建components。子组件在properties中接收，直接使用即可。2.组件的js结构如下图所示。4.组件传参之父传子。5.子组件传参给父组件。
微信小程序父子组件之间的传值
文龙刚的博客
05-13 620
【代码】微信小程序父子组件之间的传值。
微信小程序 自定义组件传参
u014300729的博客
12-06 1410
第四步：定义组件参数 在自定义组件文件夹下的js文件中，properties中定义组件变量（需要从组件外传入，此处定义组件名称-类型 及对应值（如果有默认值，此处可填写默认值，即外部不传入值的情况下组件显示默认值）这里需要注意：如果自定义组件内有使用app.wxss中公共的样式，在自定义组件内会失效，需要在自定义组件.wxss文件中单独维护，或者通过stylelsolation参数设置的方式（本次不做过多说明）引入自定义组件，如下，组件名称和对应的组件路径。至此，组件调用完成。
小程序自定义组件父子传值/子父传值
m0_53912016的博客
04-28 412
父子组件传值
微信小程序自定义组件封装及父子间组件传值的方法
10-18
在这个框架下，微信小程序自定义组件封装及父子间组件传值的方法是一个非常重要的知识点。首先，自定义组件在微信小程序开发中，可以使页面结构更清晰，提高代码的可维护性和可复用性。自定义组件就是按照特定的结构...
【小程序】微信小程序自定义组件Component详细总结
热门推荐
11-16 1万+
在根目录新建components文件夹，建立cell 文件夹，右击创建cell的Component组件cell.jscell.wxmlcell.jsoncell.wxsscell.wxml 文件
微信小程序组件间通信与传值的全面解析
x15514104477的博客
02-13 3347
本文章详细全面的讲解了微信小程序组件之间的通信功能，用大量示例代码详细讲解，并对代码进行全面解释。并对组件内的传值的详细讲解。文章详细程度值得反复观看
微信小程序之父子间组件传参
qq_34413349的博客
05-25 687
2019年05月25日 15:41:20菜鸟搬砖记阅读数：14213 版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.youkuaiyun.com/hope93/article/details/80803447 1.创建组件 打开微信开发者工具，创建组件，会生成四个文件：wxml,wxss,js,json 在wxml中： <view>我是组件A&l...
微信小程序自定义组件封装及组件传值
weixin_33912445的博客
08-28 3710
首先在我们可以直接写到需要的 page 中，然后再进行抽取组件，自定义组件建议 wxzx-xxx 命名 官网地址：developers.weixin.qq.com/miniprogram… 例如，我们封装的组件名为 **wxzx-loadmore wxzx-loadmore.wxml <view hidden="{{response.length < 1}}"> ...
小程序中父子组件间的通信与事件
weixin_30767835的博客
09-20 206
点此查看微信小程序官方文档 以下示例，可自行体会.. 子 -Component child.json { "component": true, "usingComponents": {} } child.wxml <view class='template-child'> <block wx:for='{{da...
微信小程序 跳转方式 父子组件传参
m0_47045804的博客
08-14 686
1.在项目根目录创建components文件夹 用来存放所有的自定义组件2. 先创建组件文件夹 利用开发工具右键 新建component3.输入组件名回车 自动创建组件相关的四个文件4.组件的js最外层不是Page函数 而是Component函数内部的生命周期 跟页面组件是一样的 onLoad onShow onReady onHide onUnLoad5.组件的数据放到data里面 事件函数 放到methods里面6.在哪一个页面想要渲染改子组件 那么就在json文件里面引入。
微信小程序——父子组件传参以及方法的调用
xiasohuai的博客
10-28 8110
父组件向子组件传参 A组件为父组件，B组件为子组件，以下是A组件向B组件传参 在A组件中引入B组件（父组件引入子组件） 在A组件的json中写入（父组件）： { "component": true, "usingComponents": { "componentB": "../child/child" } } 在A组件的wxml中写入（父组件）： ...
微信小程序：父子组件传值
weixin_42017221的博客
02-08 1478
在父组件监听事件。
微信小程序父子组件传值
lxc的点点滴滴
04-12 1087
微信小程序父子组件通信
【微信小程序】父子组件之间传值
islizi的博客
04-12 3681
父子组件之间传值
微信小程序 Component传参及接收
最新发布
05-28
### 微信小程序中 Component 组件的传参及接收方法 在微信小程序开发中，`Component` 是构建自定义组件的核心工具。通过 `Component`，可以实现父子组件之间的数据传递和事件通信。以下是关于微信小程序中 `Component` 的传参、接收以及数据绑定的详细说明。 --- #### 1. 父组件向子组件传参 父组件可以通过属性绑定的方式将数据传递给子组件。子组件需要通过 `properties` 定义可接收的参数，并通过 `this.properties` 获取这些参数[^2]。 **父组件示例：** ```html <view> <child-component message="{{parentMessage}}"></child-component> </view> ``` **子组件定义：** ```javascript Component({ properties: { message: { // 定义可接收的参数 type: String, // 参数类型 value: '' // 默认值 } }, methods: { showMessage() { console.log(this.properties.message); // 输出父组件传递的数据 } } }); ``` --- #### 2. 子组件向父组件传参 子组件可以通过触发事件的方式将数据传递给父组件。父组件需要监听子组件的事件，并通过事件对象的 `detail` 属性获取传递的数据[^1]。 **子组件触发事件：** ```javascript Component({ methods: { sendDataToParent() { this.triggerEvent('customEvent', { data: '子组件传递的数据' }); // 触发事件并传递数据 } } }); ``` **父组件监听事件：** ```html <view> <child-component bindcustomEvent="handleCustomEvent"></child-component> </view> ``` ```javascript Page({ handleCustomEvent(event) { console.log(event.detail.data); // 接收子组件传递的数据 } }); ``` --- #### 3. 数据绑定与动态更新 微信小程序支持通过 `data` 属性进行数据绑定，并且可以通过 `setData` 方法动态更新组件内部的状态。这种机制适用于组件内的数据管理[^5]。 **组件内部数据绑定：** ```javascript Component({ data: { message: '这是定义在组件内的消息！' }, methods: { updateMessage() { this.setData({ // 动态更新数据 message: '组件函数改变了消息!' }); } } }); ``` --- #### 4. 获取子组件实例 父组件可以通过 `selectComponent` 或 `selectAllComponents` 方法获取子组件的实例，从而直接访问子组件的方法或数据[^3]。 **父组件获取子组件实例：** ```javascript Page({ onLoad() { const child = this.selectComponent('#child'); // 获取子组件实例 child.childMethod(); // 调用子组件的方法 } }); ``` **子组件定义方法：** ```javascript Component({ methods: { childMethod() { console.log('子组件的方法被调用了'); } } }); ``` --- #### 5. 跨层级组件通信（EventChannel） 对于跨层级的组件通信，可以使用 `EventChannel`。它允许父组件在创建子组件时传递一个事件通道，子组件可以通过该通道与父组件或其他组件通信[^1]。 **父组件创建 EventChannel：** ```javascript Page({ onShareAppMessage() { const eventChannel = this.getOpenerEventChannel(); eventChannel.emit('acceptDataFromOpenerPage', { data: '来自父组件的数据' }); } }); ``` **子组件接收数据：** ```javascript Component({ attached() { const eventChannel = this.getOpenerEventChannel(); eventChannel.on('acceptDataFromOpenerPage', (data) => { console.log(data); // 接收父组件传递的数据 }); } }); ``` --- ### 示例总结 以下是一个完整的父子组件通信示例： **父组件：** ```html <view> <child-component message="{{parentMessage}}" bindcustomEvent="handleCustomEvent"></child-component> </view> ``` ```javascript Page({ data: { parentMessage: '来自父组件的消息' }, handleCustomEvent(event) { console.log(event.detail.data); // 接收子组件传递的数据 } }); ``` **子组件：** ```javascript Component({ properties: { message: { type: String, value: '' } }, methods: { sendDataToParent() { this.triggerEvent('customEvent', { data: '子组件传递的数据' }); } } }); ``` --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

春日安然

可以赏个鸡腿吃嘛~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值