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

哟哟-2023-12-23 17:22

前提条件

本项目拥有至少三个组件，父组件、子组件1、子组件2，引用关系分别为：

父组件中引用 子组件1
父组件中引用 子组件2

目标是：在 子组件2 中有一个按钮，点击需要触发 子组件1 中的一个方法。

调用步骤

第一步：父组件中引用子组件

父组件：

xml 复制代码

<!-- 父组件 index.wxml-->
<scroll-view class="whole-page" scroll-y type="list">
    <view class="content">
        <view class="center">
            <use-drawer id="use-drawer" />
        </view>
        <view class="right">
            <post-drawer bind:generate-image="generateImage" />
        </view>
    </view>
</scroll-view>

其中:

use-drawer和post-drawer分别是子组件1 和子组件2

第二步：子组件中编写事件触发机制

子组件2：

xml 复制代码

<!--components/game-pages/post-drawer/index.wxml-->
<text>components/game-pages/post-drawer/index.wxml</text>
<view>
    <view>
        <button bindtap="generateImage">生成图片</button>
    </view>
</view>

子组件2中，是通过一个按钮来触发事件。

编写generateImage方法：

typescript 复制代码

generateImage() {
    this.triggerEvent('generate-image')
}

第三步：父组件中绑定该方法

通过一个方法，和子组件2绑定

xml 复制代码

<view class="right">
    <post-drawer bind:generate-image="generateImage" />
</view>

通过bind:generate-image="generateImage"，将generate-image和父组件的generateImage绑定。

给父组件1指定唯一标识

xml 复制代码

<view class="center">
    <use-drawer id="use-drawer" />
</view>

通过id="use-drawer"，指定为子组件1的唯一标识。

定义generateImage方法

typescript 复制代码

generateImage() {
    const useDrawer = this.selectComponent("#use-drawer")
    console.log('child component:', useDrawer.data)
    useDrawer.generateImage() // 子组件中的方法
}

第四步：最后，在子组件1中定义方法即可

typescript 复制代码

generateImage() {
    // Do Something
},