【微信小程序】自定义组件 - 父子组件之间的通信

已于 2024-08-20 16:24:42 修改
阅读量88 收藏
点赞数 1
分类专栏： 微信小程序 文章标签： 微信小程序 小程序
于 2024-08-20 16:08:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40874076/article/details/141357388
版权

1. 父子组件之间通信的 3 种方式

在这里插入图片描述

2. 属性绑定

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

3. 事件绑定

在这里插入图片描述

步骤1：在父组件的 js 中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件。

在这里插入图片描述

步骤2：在父组件的 wxml 中，通过自定义事件的形式，将步骤 1 中定义的函数引用，传递给子组件。

在这里插入图片描述

步骤3：在子组件的 js 中，通过调用 this.triggerEvent(‘自定义事件名称’, { /* 参数对象 */ }) ，将数据发送到父组件。

在这里插入图片描述

步骤4：在父组件的 js 中，通过 e.detail 获取到子组件传递过来的数据。

在这里插入图片描述

代码分析

在这里插入图片描述

4. 获取组件实例

selectComponent
在这里插入图片描述
注意：不能传递标签选择器
在这里插入图片描述

奔跑的小G
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【微信小程序】-- 自定义组件 - 父子组件之间的通信（三十八）_小程序父子组件通信_我是夜阑的狗的博客-CSDN博客.mhtml
09-29
【微信小程序】-- 自定义组件 - 父子组件之间的通信（三十八）_小程序父子组件通信_我是夜阑的狗的博客-CSDN博客.mhtml
微信小程序自定义组件开发.zip
01-11
以下是对微信小程序自定义组件开发的详细讲解： 1. **自定义组件的定义**： 自定义组件是微信小程序开发中的一个重要特性，允许开发者封装可复用的UI模块，以提高代码的重用性和可维护性。自定义组件有自己的属性...
微信小程序自定义组件---父子组件通信
cozy666的博客
12-15 378
有三种方式。
【微信小程序】基础篇 -- 自定义组件 - 父子组件之间的通信（三十八）
JMFive的博客
03-14 3757
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第38篇文章;今天开始学习微信小程序的第21天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。
微信小程序----父子组件之间通信
拒绝躺平，适当内卷
11-10 2070
微信小程序----父子组件之间通信
微信小程序自定义组件 - 父子组件之间的通信
m0_61631823的博客
04-01 632
1. 父子组件之间通信的 3 种方式 ①属性绑定 用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容的数据 ②事件绑定 用于子组件向父组件传递数据，可以传递任意数据 ③获取组件实例 父组件还可以通过 this.selectComponent() 获取子组件实例对象 这样就可以直接访问子组件的任意数据和方法 2. 属性绑定 属性绑定用于实现父向子传值，而且只能传递普通类型的数据，无法将方法传递给子组件。父组件的示例代码如下： //父组件中定义 d.
微信小程序自定义组件
m0_68907098的博客
11-16 1093
微信小程序自定义组件
微信小程序自定义组件及父子组件之间的传值
一李
02-19 580
自定义组件component 创建使用组件的步骤。 在组件的json文件中更改 “component”: true。 在使用组件的页面中声明所用组件的名称和路径。 组件构造器主要定义组件，调用 Component 构造器时可以指定组件的属性、数据、方法…… 主要在lifetimes中进行生命周期函数的不同阶段的使用。 attached: function () { },//在组件实例进入页面节点树时执行 moved: function () { },//在组件实例被移动到节点树另一个位置时执行 deta
04-微信小程序开发-自定义组件
...
03-03 606
件的任意数据和方法。在组件中，使用 require() 方法导入需要的 behavior，挂载后即可访问 behavior 中的数据或方法，示例代码。③ 键入组件的名称之后回车，会自动生成组件对应的 4 个文件，后缀名分别为 .js，.json， .wxml 和 .wxss。在自定义组件的 wxml 结构中，可以提供一个 节点（插槽），用于承载组件使用者提供的 wxml 结构。在小程序的自定义组件中，需要使用多 插槽时，可以在组件的 .js 文件中，通过如下方式进行启用。
微信小程序开发---自定义组件
2301_77627792的博客
02-25 409
active {// JSON// JS/*** 组件的属性列表---不能在组件内部修改，由父组件传递*/list:{},current:{value:0},/*** 组件的初始数据*/data: {// dataList:["科技","娱乐","体育","教育"],},/*** 组件的方法列表*/
原生微信小程序自定义组件以及组件间通讯
qq_41929578的博客
06-10 1943
当我们在开发项目时，有时候会发现，在不同的页面中会用到相同的功能模块，,此时我们就可以将这些相同的部分提取出来并且单独设为一个"页面",然后在要应用到它的地方引用就可以了， 在vue 、react 等框架中，组件化开发的概念相信大家都很熟悉了，下面我来介绍介绍原生微信小程序如何定义组件，如果有纰漏欢迎大家指正。...
微信小程序自定义组件封装及父子间组件传值的方法
10-18
在这个框架下，微信小程序自定义组件封装及父子间组件传值的方法是一个非常重要的知识点。首先，自定义组件在微信小程序开发中，可以使页面结构更清晰，提高代码的可维护性和可复用性。自定义组件就是按照特定的结构...
微信小程序自定义某些常用组件.zip
01-11
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出...总之，掌握微信小程序自定义组件的技巧是提升小程序开发效率和用户体验的关键。通过学习和实践上述知识点，开发者可以创造出更具特色和功能丰富的微信小程序。
这是一个存放微信小程序自定义组件的仓库wxapp-components-examples.zip
09-25
这个名为“wxapp-components-examples.zip”的压缩包文件显然包含了一系列关于微信小程序自定义组件的示例代码和实践案例。 1. **自定义组件的基本概念** 自定义组件是微信小程序开发中的核心特性之一，它允许...
微信小程序骨架屏
djjdjdjdjddjjdjd的博客
08-16 412
⑤ 在onLoad 中页面加载前定义 isLoading.value=true, 在加载完后定义 isLoading.value=false.骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。① 在相应微信小程序页面右下角点生成骨架屏，左侧小程序目录会自动生成 .wxml 、.wxss 文件，⑥ 在生成骨架屏页面中 v-if="isLoading" v-else 定义显示与隐藏。
【微信小程序】自定义组件 - 插槽
最新发布
weixin_40874076的博客
08-20 215
在小程序中，默认每个自定义组件中只允许使用一个 进行占位，这种个数上的限制叫做单个插槽。
基于微信小程序的书籍销售预测系统的设计与实现(论文+源码)_kaic
涉及毕业论文、远程调试、小程序、管理系统、JAVA、C#、IDEA、VS开发工具等
08-18 851
经过对作者形象的塑造、书籍品牌的分析、书籍多种增值的衍生品、书籍的整体设计以及推广渠道等五个方面的探究，对此深入探讨了书籍设计的内涵、运作方式和途径，深入了解了网上书店的意义以及其对书籍市场的影响和现实意义。本系统建成后，开发的微信小程序的书籍销售预测系统前景广阔，经济价值高，在小程序开发前也在我们的考虑范围内。本系统的开发为消费者提供了网上平台，实现了用户和管理者的双赢局面，节省空间、资金，提高了生活质量和时间，降低了管理者的运营成本，为社会科技发展做出贡献，为网上图书销售的发展提供了巨大的支持。
微信小程序--30（网络数据请求）
qq_57464528的博客
08-19 330
1.小程序中网络数据请求的限制 只能请求HTTPS类型的接口 必须将接口的域名添加到信任列表中 2.配置request合法域名 需求描述 希望请求某个域名下的接口 步骤 登录小程序管理后台→开发→开发设置→服务器域名→修改request合法域名 练习 注意事项 域名不可使用ip地址和localhost 域名必须经过icp备案 3.发起get请求 作用 获取数据 方法 wx.re
微信小程序自定义组件父子组建传值
03-25
在微信小程序中，父组件向子组件传值可以使用属性传值的方式，在父组件中设置属性，在子组件中接收，如下所示： 父组件： ``` <template> <child-component prop-a="value-a"></child-component> </template> <script> import childComponent from './child-component.vue' export default { components: { 'child-component': childComponent } } </script> ``` 子组件： ``` <template> <div>{{ propA }}</div> </template> <script> export default { props: { propA: { type: String, default: '' } } } </script> ``` 这样，在父组件中设置 `prop-a` 属性的值为 `value-a` ，子组件中通过 `$props` 对象获取并显示 `propA` 值。 而子组件向父组件传值则需要使用自定义事件，在子组件中触发事件，在父组件中监听并接收，如下所示： 子组件： ``` <template> <button @click="onBtnClick">Click me</button> </template> <script> export default { methods: { onBtnClick() { this.$emit('event-name', 'value') } } } </script> ``` 父组件： ``` <template> <child-component @event-name="onEvent"></child-component> </template> <script> import childComponent from './child-component.vue' export default { components: { 'child-component': childComponent }, methods: { onEvent(value) { console.log('received value: ', value) } } } </script> ``` 这样，当子组件中的按钮被点击后，会触发 `event-name` 事件并传递一个值，在父组件中监听该事件，并接收传递的值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值