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

前提条件

本项目拥有至少三个组件,父组件子组件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
},
相关推荐
2501_915909064 小时前
tcpdump 抓包数据分析实战,命令、过滤、常见故障定位与真机补充流程
网络·测试工具·ios·小程序·uni-app·iphone·tcpdump
赵庆明老师9 小时前
Uniapp微信小程序开发:微信小程序支付功能后台代码
微信小程序·小程序·uni-app
00后程序员张11 小时前
tcpdump 抓包分析,命令、过滤技巧、常见症状定位与移动真机补充方案
网络·测试工具·ios·小程序·uni-app·iphone·tcpdump
会点法律的程序员14 小时前
小程序 地理位置授权怎么搞
前端·小程序·uni-app
FliPPeDround14 小时前
告别 uni-app 启动烦恼:@uni-helper/unh 让开发流程更顺畅
前端·微信小程序·uni-app
2501_9159214317 小时前
iOS 26 电耗监测与优化,耗电问题实战 + 多工具 辅助策略
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_9159214317 小时前
苹果软件混淆与 iOS 应用加固白皮书,IPA 文件加密、反编译防护与无源码混淆方案全解析
android·ios·小程序·https·uni-app·iphone·webview
@二十六17 小时前
微信小程序订阅消息工具封装,兼容一次性订阅和长期订阅
微信小程序·小程序·订阅消息
dcloud_jibinbin18 小时前
【uniapp】体验优化:开源工具集 uni-toolkit 发布
前端·webpack·性能优化·小程序·uni-app·vue
用力的活着19 小时前
uniapp 微信小程序蓝牙接收中文乱码
微信小程序·小程序·uni-app