微信小程序 - 子组件触发父组件函数

最新推荐文章于 2024-06-30 10:42:40 发布
最新推荐文章于 2024-06-30 10:42:40 发布
阅读量384 收藏
点赞数
文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MfddMobile/article/details/132999246
版权
小程序 专栏收录该内容
36 篇文章 4 订阅 ¥59.90 ¥99.00
订阅专栏
本文介绍了在微信小程序开发中，子组件如何触发父组件函数的实现过程。通过创建父组件和子组件，设置事件绑定，以及在JavaScript文件中编写相应逻辑，详细阐述了子组件在触发事件后如何将数据传递给父组件的事件处理函数，从而实现两者间的通信。
摘要由CSDN通过智能技术生成

在微信小程序开发中，经常会遇到子组件需要触发父组件函数的情况。这种需求通常发生在子组件内部发生某些事件，需要通知父组件进行相应的处理。本文将介绍如何在微信小程序中实现子组件触发父组件函数的功能，并提供相应的源代码示例。

  1. 创建父组件和子组件

首先，我们需要创建一个父组件和一个子组件。父组件负责包含子组件，并定义一个函数，用于接收子组件触发的事件。

父组件的代码如下所示（parent-component.wxml）：

<view>
  <text>{
  {message}}</text>
  <child-component
了解本专栏 订阅专栏 解锁全文
MfddMobile
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
微信小程序 - 子组件触发父组件函数（triggerEvent）
王佳斌
02-17 7990
前言 类似 Vue 中 this.$emit()，子组件可执行父组件的函数方法。 在小程序里，组件间通信与传统 Vue 有所区别，但只不过是语法上。 解决方案 官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html 其实官方文档已介绍 this.triggerEvent 与其参数，下面是更加易于理解的例子。 子组件（help）： <view bindtap="on
微信小程序 子组件传值给父组件，调用父组件函数
weixin_43452154的博客
09-08 2108
当我们父组件调用子组件时候，想要将子组件的参数传递给父组件来进行数据处理或者直接调用父组件的方法。那么我们一起来学习下。
微信小程序 子组件调用父组件/页面的函数方法
weixin_44383533的博客
05-15 1346
通过tigeerEvent 调用 自定义的时间cancel 实现调用父亲页面函数。这里以按钮组件为例子。
微信小程序调用函数
最新发布
zhang20040217的博客
06-30 672
在小程序的Page对象中定义的函数可以直接在页面的生命周期函数、事件处理器或其他函数中调用。5 }6});你还可以将函数定义在独立的JS文件中，然后在需要的Page对象中导入并调用。在微信小程序中调用函数的方式多样，可以根据实际需求选择最适合的调用方式。无论是直接在Page对象中定义和调用函数，还是在外部JS文件中定义并通过模块导入使用，或者是作为异步操作的回调，理解这些调用机制对于小程序的开发至关重要。
微信小程序父子组件方法调用方法汇总
sinat_33255495的博客
11-03 5990
父组件向子组件传值 父组件通过属性传值 <childEle childParams="{{params}}"></childEle> 子组件通过properties接收： properties: { childParams: { type: String } } 子组件调用父组件方法 父组件定义方法，childFun是子组件中的方法名，fun是父组件中的方法名。我们通过chidlFun来调用fun。 <childEle childParams="{{params}}" b
微信小程序子组件调用父组件的方法
weixin_43029943的博客
11-21 2924
微信小程序子组件调用父组件的方法1. 创建组件2. 父组件3. 执行程序 1. 创建组件 <!--components/child.wxml--> <button catchtap="parentComponentFunction">子组件调用父组件的按钮</button> // components/child.js methods: { parentComponentFunction() { console.log("子组件方法");
微信小程序---弹窗封装（组件）
08-02
1、为了统一展示弹窗页面，封装成了一个组件 2、功能：可以自定义“取消”“确定”按钮文案，可以自定义是否显示单个按钮或多个按钮，可以调用相应方法即可进行相应的js执行 3、方便快捷，下载直接放进组件里面，...
微信小程序-微信小程序自定义组件（修正）
02-26
在微信小程序的开发过程中，自定义组件是提高代码复用性和灵活性的重要手段，它允许开发者根据自己的需求设计并封装功能模块，形成独立的组件，然后在不同的页面或场景中重复使用。 自定义组件的创建步骤如下： 1....
微信小程序-电影推荐-程序源码.zip
05-31
2. **样式设计**：使用WXSS，开发者可以创建符合微信小程序规范的CSS样式，实现组件的定制化外观。这包括选择器、盒模型、布局方式（如Flex布局）等。 3. **生命周期与事件处理**：在源码中，JavaScript文件将展示...
微信小程序-仿苹果音乐微信小程序源码
05-08
微信小程序由一系列组件、API和样式表构成，通过WXML（微信小程序的标记语言）和WXSS（微信小程序的样式语言）进行界面布局，用JavaScript处理逻辑和数据交互。开发者需要对这三者有深入理解才能创建出功能丰富的...
微信小程序-个人简历
01-27
微信小程序支持自定义组件，开发者可以根据需求封装复用的UI部件。在个人简历中，可能有自定义的“技能条”或“项目经验”组件，这些组件可以提高代码的可维护性和重用性。 6. 网络请求： 如果个人简历需要从...
ES6下子组件调用父组件的方法(推荐)
08-27
ES6下如何实现子组件调用父组件？下面小编就为大家分享一篇ES6下子组件调用父组件的方法。希望对大家有所帮助。一起跟随小编过来看看吧
小程序父子组件调用
nuomai
08-31 2955
小程序父子组件调用
Vue子组件调用父组件的方法
XYLH2015的博客
04-15 3307
第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <template> <div> <child></child> </div> </template> <script> import child from '~/comp...
【微信小程序】基础篇 -- 自定义组件 - 父子组件之间的通信（三十八）
JMFive的博客
03-14 3712
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第38篇文章;今天开始学习微信小程序的第21天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。
微信小程序子组件调用父组件中的方法并且传参
Zning_的博客
03-13 1231
微信小程序子组件调用父组件方法
vue子组件触发父组件事件
xiaoququ的博客
09-26 3882
子组件 <input type="search" @keyup.13="searchGoods" placeholder="请输入关键词" v-model="searchValue" /> <p @click="searchGoods">搜索</p> searchGoods() { this.$emit("gosearch", this.sea...
微信小程序子组件拿到父组件的值
08-14
在微信小程序中，子组件可以通过父组件传递的属性值来获取父组件的值。父组件向子组件传递值时，可以使用属性绑定的方法。子组件可以通过使用`properties`属性来接收父组件传递的值。具体实现方法如下： 在父组件中使用子组件，并传递值： ``` <子组件名 属性名="{{父组件的值}}"></子组件名> ``` 在子组件的js文件中，使用`properties`属性接收父组件传递的值： ``` properties: { 属性名: { type: 类型, value: 默认值 } } ``` 这样子组件就可以通过`this.properties.属性名`来获取父组件传递过来的值了。 如果需要子组件向父组件传递值，可以使用自定义事件。子组件在触发事件时，通过`triggerEvent`方法将数据传递给父组件。具体实现方法如下： 在子组件的js文件中，触发自定义事件并传递值： ``` this.triggerEvent('事件名', 数据) ``` 在父组件中，监听子组件触发的事件，并获取子组件传递的值： ``` <子组件名 bind:事件名="事件处理函数"></子组件名> ``` 在父组件的js文件中，实现事件处理函数： ``` 事件处理函数(e) { console.log(e.detail) // 获取子组件传递的值 } ``` 通过以上方法，子组件就可以拿到父组件的值，并且父组件也可以获取子组件传递的值了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [微信小程序：父子组件传值](https://blog.csdn.net/KazariFox/article/details/126348657)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [微信小程序 子组件传值给父组件，调用父组件函数](https://blog.csdn.net/weixin_43452154/article/details/126770872)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值