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

最新推荐文章于 2024-12-15 19:45:37 发布

原创最新推荐文章于 2024-12-15 19:45:37 发布 · 620 阅读

0 GEO检测

标签

#微信小程序 #小程序

收录于

小程序专栏收录该内容

36 篇文章 ¥59.90 ¥99.00

订阅专栏

本文介绍了在微信小程序开发中，子组件如何触发父组件函数的实现过程。通过创建父组件和子组件，设置事件绑定，以及在JavaScript文件中编写相应逻辑，详细阐述了子组件在触发事件后如何将数据传递给父组件的事件处理函数，从而实现两者间的通信。

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

创建父组件和子组件

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

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

<view>
  <text>{
  
  {message}}</text>

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

MfddMobile

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

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

🏆 前端领域优质创作者

02-17

9833

前言类似Vue中this.$emit()，子组件可执行父组件的函数方法。在小程序里，组件间通信与传统Vue有所区别，但只不过是语法上。解决方案官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html 其实官方文档已介绍this.triggerEvent与其参数，下面是更加易于理解的例子。 子组件（help）： <viewbindtap="on

参与评论您还未登录，请先登录后发表或查看评论

微信小程序父子组件方法调用方法汇总

sinat_33255495的博客

11-03

6970

父组件向子组件传值 父组件通过属性传值 <childEle childParams="{{params}}"></childEle> 子组件通过properties接收： properties: { childParams: { type: String } } 子组件调用父组件方法 父组件定义方法，childFun是子组件中的方法名，fun是父组件中的方法名。我们通过chidlFun来调用fun。 <childEle childParams="{{params}}" b

微信小程序子组件向父组件传递数据

qq_44866810的博客

08-13

2757

。当用户点击子组件中的按钮时，子组件会触发一个名为 customEvent 的事件，并附带一些数据。父组件监听这个事件，并在其方法 handleClickFromChild 中处理这些数据。

小程序父子组件调用

nuomai

08-31

3108

小程序父子组件调用

小程序子组件调用父组件方法、父组件调用子组件方法

最新发布

gdgztt的专栏

12-15

1941

小程序子组件调用父组件方法、父组件调用子组件方法

微信小程序子组件调用父组件的方法

weixin_43029943的博客

11-21

3239

微信小程序子组件调用父组件的方法1. 创建组件2. 父组件3. 执行程序 1. 创建组件  <button catchtap="parentComponentFunction">子组件调用父组件的按钮</button> // components/child.js methods: { parentComponentFunction() { console.log("子组件方法");

微信小程序组件调用父组件/页面函数

vancece

08-15

2458

子组件 methods: { oh: function (event) { this.triggerEvent('callparent', {}, {}) } } 父组件 <child bind:callParent="parentFunction"></child> 其中，parentFunction是属于父组件的函数

微信小程序怎么把获取的值传到引用组件内_微信小程序子组件给父组件传参，子组件调用父组件函数...

weixin_39656206的博客

12-21

345

今天我们讲解一下微信小程序子组件如何给父组件传参数，子组件如何调用父组件的函数1、子组件js文件定义函数addInfo注：triggerEvent第一参数要跟第4步中bind:addInfo中的字符保持一致addInfo(){let item = {title:'测试',money:8,category:'吃饭'}//要传给父组件的参数this.triggerEvent('addInfo',ite...

微信小程序 子组件调用父组件/页面的函数方法

weixin_44383533的博客

05-15

2015

通过tigeerEvent 调用自定义的时间cancel 实现调用父亲页面函数。这里以按钮组件为例子。

微信小程序子组件调用父组件中的方法并且传参

Zning_的博客

03-13

1712

微信小程序子组件调用父组件方法

微信小程序 子组件传值给父组件，调用父组件函数

weixin_43452154的博客

09-08

2461

当我们父组件调用子组件时候，想要将子组件的参数传递给父组件来进行数据处理或者直接调用父组件的方法。那么我们一起来学习下。

Vue子组件调用父组件的方法

XYLH2015的博客

04-15

3464

第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <template> <div> <child></child> </div> </template> <script> import child from '~/comp...

Vue子组件调用父组件事件的三种方法

m0_37878884的博客

02-15

6200

Vue子组件调用父组件事件的三种方法

微信小程序父子组件之间通信的 3 种方式

qq_39321234的博客

06-24

2693

⚫ 父组件还可以通过 this.selectComponent() 获取子组件实例对象，这样就可以直接访问子组件的任意数据和方法。⚫ 用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容的数据。⚫ 用于子组件向父组件传递数据，可以传递任意数据。

小程序：父子组件方法的相互调用

明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。

03-11

1109

一、父组件调用子组件方法 子组件方法： // 组件的方法列表 methods: { test(){ console.log('我是子组件方法') } }, 父组件调用： <test id="two"/> 在自定义方法里调用即可 this.selectComponent('#two').test(...

vue组件通信---子传父（自定义事件$emit(eventName,data)）

热门推荐

muzidigbig的博客

11-20

1万+

一、概括在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了。绑定事件监听 // 方式一: 通过 v-on 绑定 @delete_todo="deleteTodo" // 方式二: 通过$on() this.$refs.xxx.$on('delete_t... vue子组件调用父组件中的方法

【微信小程序】基础篇 -- 自定义组件 - 父子组件之间的通信（三十八）

JMFive的博客

03-14

4476

大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第38篇文章;今天开始学习微信小程序的第21天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。

子组件中调用父组件的方法以及父组件调用子组件的方法

weixin_46633789的博客

12-07

2459

一、子组件调用父组件的第一种方法 1、在父组件中定义一个方法 2、在子组件指定的事件中进行调用二、在父组件中进行监听1、父组件中 2.子组件中

微信小程序自定义组件：组件间通讯

sayyy的专栏

04-18

1085

略

【微信小程序】父子组件的创建、通信与事件触发；组件生命周期

记录

09-02

1894

父组件传值给子组件:子组件properties接收子组件传值给父组件：子组件this.triggerEvent()激发传给父组件父组件调用子组件的方法：父组件使用this.selectComponent 获取子组件的实例对象子组件调用父组件的方法:子组件this.triggerEvent()激发传给父组件可以看出来如果是子组件要想与父组件通信，无论是传参还是调用方法，都可以通过this.triggerEvent()实现。传参也只是调用方法的一种特殊情况而已。