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

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

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

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

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

一. 新建目录结构

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

二. 自定义组件

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

<!--components/position-list/position-list.wxml--&
最低0.47元/天 解锁文章

200万优质内容无限畅学
小程序自定义组件配合插槽和组件传值
m0_69876298的博客
08-27 1299
微信小程序自定义组件的使用并配合插槽和组件父子通信
微信小程序父子组件之间的传值
文龙刚的博客
05-13 552
【代码】微信小程序父子组件之间的传值。
微信小程序自定义组件及传参
weixin_49875932的博客
11-21 722
父组件 bind+事件名='回调方法' 进行接收，并在回调方法中可以获得传递的参数。子组件 使用 this.triggerEvent('事件名',参数)进行传参。3.使用组件，在需要引用组件的页面json配置中引入组件。1.新建文件夹，然后右键选择新建components。子组件在properties中接收，直接使用即可。2.组件的js结构如下图所示。4.组件传参之父传子。5.子组件传参给父组件。
微信小程序传参的六种方式
最新发布
2301_76459194的博客
05-23 1084
本文总结了小程序开发中六种常见的页面间传参方式：1. 使用globalData全局数据；2. 使用storage缓存；3. 通过url路由传参；4. 组件传值（父传子、子传父）；5. 使用通信通道；6. 利用页面栈直接操作页面数据。每种方式都有其适用场景和优缺点，开发者可根据具体需求选择合适的方法。例如，globalData和storage适合全局数据共享，但数据更新不会自动同步；路由传参简单但长度有限；组件传值适合父子组件通信；通信通道和页面栈则提供了更灵活的传参方式。
微信小程序 自定义组件传参
u014300729的博客
12-06 1355
第四步：定义组件参数 在自定义组件文件夹下的js文件中，properties中定义组件变量（需要从组件外传入，此处定义组件名称-类型 及对应值（如果有默认值，此处可填写默认值，即外部不传入值的情况下组件显示默认值）这里需要注意：如果自定义组件内有使用app.wxss中公共的样式，在自定义组件内会失效，需要在自定义组件.wxss文件中单独维护，或者通过stylelsolation参数设置的方式（本次不做过多说明）引入自定义组件，如下，组件名称和对应的组件路径。至此，组件调用完成。
小程序自定义组件父子传值/子父传值
m0_53912016的博客
04-28 397
父子组件传值
微信小程序之父子间组件传参
qq_34413349的博客
05-25 674
2019年05月25日 15:41:20菜鸟搬砖记阅读数：14213 版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.youkuaiyun.com/hope93/article/details/80803447 1.创建组件 打开微信开发者工具，创建组件，会生成四个文件：wxml,wxss,js,json 在wxml中： <view>我是组件A&l...
微信小程序自定义组件封装及父子间组件传值的方法
10-18
在这个框架下，微信小程序自定义组件封装及父子间组件传值的方法是一个非常重要的知识点。首先，自定义组件在微信小程序开发中，可以使页面结构更清晰，提高代码的可维护性和可复用性。自定义组件就是按照特定的结构...
微信小程序进阶(1)--自定义组件
囦不在地球的博客
05-27 1240
自定义组件
【小程序】微信小程序自定义组件Component详细总结
热门推荐
11-16 1万+
在根目录新建components文件夹，建立cell 文件夹，右击创建cell的Component组件cell.jscell.wxmlcell.jsoncell.wxsscell.wxml 文件
微信小程序自定义组件封装及组件传值
weixin_33912445的博客
08-28 3697
首先在我们可以直接写到需要的 page 中，然后再进行抽取组件，自定义组件建议 wxzx-xxx 命名 官网地址：developers.weixin.qq.com/miniprogram… 例如，我们封装的组件名为 **wxzx-loadmore wxzx-loadmore.wxml <view hidden="{{response.length < 1}}"> ...
小程序中父子组件间的通信与事件
weixin_30767835的博客
09-20 188
点此查看微信小程序官方文档 以下示例，可自行体会.. 子 -Component child.json { "component": true, "usingComponents": {} } child.wxml <view class='template-child'> <block wx:for='{{da...
微信小程序 跳转方式 父子组件传参
m0_47045804的博客
08-14 625
1.在项目根目录创建components文件夹 用来存放所有的自定义组件2. 先创建组件文件夹 利用开发工具右键 新建component3.输入组件名回车 自动创建组件相关的四个文件4.组件的js最外层不是Page函数 而是Component函数内部的生命周期 跟页面组件是一样的 onLoad onShow onReady onHide onUnLoad5.组件的数据放到data里面 事件函数 放到methods里面6.在哪一个页面想要渲染改子组件 那么就在json文件里面引入。
微信小程序——父子组件传参以及方法的调用
xiasohuai的博客
10-28 7958
父组件向子组件传参 A组件为父组件，B组件为子组件，以下是A组件向B组件传参 在A组件中引入B组件（父组件引入子组件） 在A组件的json中写入（父组件）： { "component": true, "usingComponents": { "componentB": "../child/child" } } 在A组件的wxml中写入（父组件）： ...
微信小程序：父子组件传值
weixin_42017221的博客
02-08 1412
在父组件监听事件。
微信小程序父子组件传值
lxc的点点滴滴
04-12 1021
微信小程序父子组件通信
【微信小程序】父子组件之间传值
islizi的博客
04-12 3648
父子组件之间传值
微信小程序中事件传参
01-09
### 微信小程序事件处理中的参数传递 在微信小程序中，可以通过特定的方式实现事件处理过程中的参数传递。主要采用`data-*`属性来附加额外的数据，在触发事件时这些数据会被一同发送给对应的事件处理器。 对于按钮点击事件而言，不建议直接尝试向事件绑定处嵌入参数值，如下所示为错误示范： ```html <button bindtap="handletap(-1)"> ``` 正确的做法是在标签内利用`data-`前缀定义自定义属性用于携带想要传输的信息，之后通过事件对象访问该信息[^2]。具体操作可以参照下面的例子： #### HTML部分 ```html <!-- 使用 data-number 属性传递数值 --> <button bindtap="handleTap" data-number="-1">Click Me</button> ``` #### JavaScript部分 ```javascript Page({ handleTap(e) { const number = e.currentTarget.dataset.number; console.log('Received number:', number); // 进一步的业务逻辑... } }) ``` 上述代码片段展示了如何设置以及读取由HTML元素上的`data-*`属性所指定的参数。当用户点击带有此特性的按钮时，关联的方法会接收到一个包含了目标节点详情的对象作为输入；其中就包括了所有以`dataset`形式存在的自定义属性及其对应值[^1]。 此外，在涉及父子组件间通信的情况下，还可以借助于`bind:`指令配合具体的事件名称来进行监听并响应来自子组件的通知消息[^4]。例如，如果有一个名为`card`的子组件发出了登录成功的信号，则可以在其上级页面里声明相应的回调机制以便及时作出反应。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

春日安然

可以赏个鸡腿吃嘛~

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

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

打赏作者

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

抵扣说明：

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

余额充值