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

来源:通义千文2.5

步骤 1: 定义父组件中的方法

首先,在父组件中定义一个方法(如 handleClick),并准备一个用于接收子组件传来的数据的方法。

父组件(Parent.wxml)
复制代码
html
javascript 复制代码
<!-- parent.wxml -->
<view class="parent">
  <view>这是父组件</view>
  <child id="childComponent" bind:customEvent="handleClickFromChild"></child>
</view>
父组件逻辑文件(Parent.js)
javascript 复制代码
// parent.js
Page({
  data: {
    message: ''
  },
  handleClickFromChild: function (e) {
    console.log('接收到子组件的数据:', e.detail);
    this.setData({
      message: e.detail.message
    });
  }
});

步骤 2: 在子组件中触发事件

接下来,在子组件中触发一个自定义事件,将数据传递给父组件。

子组件模板文件(Child.wxml)
javascript 复制代码
<!-- child.wxml -->
<view class="child">
  <button bindtap="sendDataToParent">发送数据给父组件</button>
</view>
子组件逻辑文件(Child.js)
javascript 复制代码
// child.js
Component({
  methods: {
    sendDataToParent: function () {
      var data = { message: '你好,我是子组件!' };
      this.triggerEvent('customEvent', data);
    }
  }
});

详解this.triggerEvent('customEvent', data)

  1. this 关键字:

    • 在子组件的方法内部,this 指向当前组件实例。这意味着你可以使用 this 来访问组件的状态、属性和方法等。
  2. triggerEvent 方法:

    • triggerEvent 是微信小程序提供的一个API,用于在组件内部触发一个自定义事件。它接受两个参数:
      • 第一个参数是一个字符串,表示事件的名称;
      • 第二个参数是事件携带的数据。
  3. 事件名称:

    • 在本例中,事件名称为 'customEvent'。你需要确保这个事件名称与你在父组件中绑定的事件名称一致,这样父组件才能正确地接收到事件。
  4. 传递的数据:

    • 事件可以携带数据。在这个例子中,data 变量包含了一个对象 { message: '你好,我是子组件!' }。这个对象将作为事件的一部分被传递到父组件。
  5. 调用 triggerEvent 方法:

    • sendDataToParent 方法被调用时(例如,当用户点击子组件中的按钮时),triggerEvent 方法就会被调用,触发一个名为 'customEvent' 的事件,并将数据对象 { message: '你好,我是子组件!' } 作为参数传递。
相关推荐
攻城狮-申1 小时前
小程序uview actionSheet 内容过多高度设置
小程序·uview·hb
ybb_ymm2 小时前
从需求开始至架构设计的适用于商家及小吃摊的点餐小程序
小程序·apache
2501_915106323 小时前
HTTPS 爬虫实战指南 从握手原理到反爬应对与流量抓包分析
爬虫·网络协议·ios·小程序·https·uni-app·iphone
2501_916007473 小时前
iOS 上架技术支持全流程解析,从签名配置到使用 开心上架 的实战经验分享
android·macos·ios·小程序·uni-app·cocoa·iphone
阿登林3 小时前
如何利用扣子生成小程序并进行发布指南
小程序·扣子
全职计算机毕业设计4 小时前
基于微信小程序的运动康复中心预约系统的设计与实现(SpringBoot+Vue+Uniapp)
vue.js·spring boot·微信小程序
流***陌13 小时前
手办盲盒抽赏小程序前端功能设计:兼顾收藏需求与抽赏乐趣
前端·小程序
Tencent_TCB13 小时前
云开发CloudBase AI+实战:快速搭建AI小程序全流程指南
人工智能·ai·小程序·ai编程·云开发
说私域15 小时前
“开源AI大模型AI智能名片S2B2C商城小程序”视角下的教育用户策略研究
人工智能·小程序
2501_9160074718 小时前
提升 iOS 26 系统流畅度的实战指南,多工具组合监控
android·macos·ios·小程序·uni-app·cocoa·iphone