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

来源:通义千文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: '你好,我是子组件!' } 作为参数传递。
相关推荐
難釋懷2 分钟前
微信小程序案例 - 本地生活(列表页面)
微信小程序·生活·notepad++
皆是梦2 小时前
notepad++ 多行复制拼接
notepad++
游戏开发爱好者812 小时前
iOS App 电池消耗管理与优化 提升用户体验的完整指南
android·ios·小程序·https·uni-app·iphone·webview
_pengliang12 小时前
小程序按住说话
开发语言·javascript·小程序
万岳科技程序员小金14 小时前
多端协同的招聘系统源码开发指南:小程序+APP一体化设计
小程序·软件开发·app开发·招聘小程序·同城招聘系统源码·招聘app开发·招聘软件开发
xkxnq15 小时前
微信小程序地理定位功能
微信小程序·小程序
難釋懷15 小时前
微信小程序全局数据共享
微信小程序·小程序
郭邯15 小时前
小程序自定义组件学习笔记
微信小程序
阿眠17 小时前
vue3实现web端和小程序端个人签名
前端·小程序·apache
2501_9159184120 小时前
iOS 性能监控工具全解析 选择合适的调试方案提升 App 性能
android·ios·小程序·https·uni-app·iphone·webview