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

前提条件

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

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

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

调用步骤

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

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

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

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

  1. 编写generateImage方法:
typescript 复制代码
generateImage() {
    this.triggerEvent('generate-image')
}

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

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

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

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

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

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

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

typescript 复制代码
generateImage() {
    // Do Something
},
相关推荐
小小王app小程序开发1 分钟前
旧衣回收小程序的技术架构与商业落地:开发者视角的全链路解析
小程序·架构
sen_shan1 小时前
《微信小程序》第七章:TabBar设计
微信小程序·小程序
程序0071 小时前
微信小程序app.js错误:require is not defined
javascript·微信小程序·小程序
云起SAAS1 小时前
斗兽棋象狮虎豹狼小游戏抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·斗兽棋象狮虎豹狼小游戏
幽络源小助理2 小时前
微信小程序火锅店点餐系统SSM源码
微信小程序
说私域2 小时前
基于“开源AI智能名片链动2+1模式S2B2C商城小程序”的会员制培养策略研究
人工智能·小程序
2501_915921432 小时前
iOS 26 描述文件管理与开发环境配置 多工具协作的实战指南
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_915909062 小时前
iOS 抓包实战 从原理到复现、定位与真机取证全流程
android·ios·小程序·https·uni-app·iphone·webview
江城开朗的豌豆2 小时前
webpack了解吗,讲一讲原理,怎么压缩代码
前端·javascript·微信小程序
江城开朗的豌豆2 小时前
Webpack配置魔法书:从入门到高手的通关秘籍
前端·javascript·微信小程序