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

一只欢喜2024-08-17 16:16

来源：通义千文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)

this 关键字:
- 在子组件的方法内部，this 指向当前组件实例。这意味着你可以使用 this 来访问组件的状态、属性和方法等。
triggerEvent 方法:
- triggerEvent 是微信小程序提供的一个API，用于在组件内部触发一个自定义事件。它接受两个参数：
  - 第一个参数是一个字符串，表示事件的名称；
  - 第二个参数是事件携带的数据。
事件名称:
- 在本例中，事件名称为 'customEvent'。你需要确保这个事件名称与你在父组件中绑定的事件名称一致，这样父组件才能正确地接收到事件。
传递的数据:
- 事件可以携带数据。在这个例子中，data 变量包含了一个对象 { message: '你好，我是子组件！' }。这个对象将作为事件的一部分被传递到父组件。
调用 triggerEvent 方法:
- 当 sendDataToParent 方法被调用时（例如，当用户点击子组件中的按钮时），triggerEvent 方法就会被调用，触发一个名为 'customEvent' 的事件，并将数据对象 { message: '你好，我是子组件！' } 作为参数传递。