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

来源:通义千文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: '你好,我是子组件!' } 作为参数传递。
相关推荐
铲子Zzz3 小时前
Java使用接口AES进行加密+微信小程序接收解密
java·开发语言·微信小程序
paopaokaka_luck8 小时前
基于SpringBoot+Vue的非遗文化传承管理系统(websocket即时通讯、协同过滤算法、支付宝沙盒支付、可分享链接、功能量非常大)
java·数据库·vue.js·spring boot·后端·spring·小程序
春哥的研究所10 小时前
AI人工智能名片小程序源码系统,名片小程序+分销商城+AI客服,包含完整搭建教程
人工智能·微信小程序·小程序
paopaokaka_luck11 小时前
智能推荐社交分享小程序(websocket即时通讯、协同过滤算法、时间衰减因子模型、热度得分算法)
数据库·vue.js·spring boot·后端·websocket·小程序
贝格前端工场12 小时前
小程序订阅消息设计:用户触达与隐私保护的平衡法则
大数据·小程序
weixin_lynhgworld12 小时前
盲盒一番赏小程序:用科技重新定义“未知的快乐”
科技·小程序
Bruce_Json12 小时前
微信小程序ts+sassjlin-ui
微信小程序·小程序·sass
来碗盐焗星球14 小时前
记一次微信小程序AI开发的血泪史
前端·微信小程序
说私域16 小时前
淘宝直播与开源链动2+1模式AI智能名片S2B2C商城小程序的融合发展研究
人工智能·小程序·开源
说私域19 小时前
互联网生态下赢家群体的崛起与“开源AI智能名片链动2+1模式S2B2C商城小程序“的赋能效应
人工智能·小程序·开源