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

2023-12-21 12:46:28

前提条件

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

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

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

调用步骤

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

  1. 父组件:
<!-- 父组件 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-drawerpost-drawer分别是子组件1 和子组件2

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

  1. 子组件2:
<!--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中,是通过一个按钮来触发事件。

  1. 编写generateImage方法:
generateImage() {
    this.triggerEvent('generate-image')
}

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

  1. 通过一个方法,和子组件2绑定
<view class="right">
    <post-drawer bind:generate-image="generateImage" />
</view>

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

  1. 给父组件1指定唯一标识
<view class="center">
    <use-drawer id="use-drawer" />
</view>

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

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

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

generateImage() {
    // Do Something
},

文章来源:https://blog.csdn.net/qq_29517595/article/details/135126193
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。