前提条件
本项目拥有至少三个组件，父组件、子组件1、子组件2，引用关系分别为：
-
父组件中 引用子组件1 -
父组件中 引用子组件2
目标是：在 子组件2 中有一个按钮，点击需要触发 子组件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-drawer和post-drawer分别是子组件1 和子组件2
第二步：子组件中编写事件触发机制
- 子组件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中，是通过一个按钮来触发事件。
- 编写
generateImage方法：
generateImage() {
this.triggerEvent('generate-image')
}
第三步：父组件中绑定该方法
- 通过一个方法，和子组件2绑定
<view class="right">
<post-drawer bind:generate-image="generateImage" />
</view>
通过bind:generate-image="generateImage"，将generate-image和父组件的generateImage绑定。文章来源：https://www.toymoban.com/news/detail-823383.html
- 给父组件1指定唯一标识
<view class="center">
<use-drawer id="use-drawer" />
</view>
通过id="use-drawer"，指定为子组件1的唯一标识。文章来源地址https://www.toymoban.com/news/detail-823383.html
- 定义
generateImage方法
generateImage() {
const useDrawer = this.selectComponent("#use-drawer")
console.log('child component:', useDrawer.data)
useDrawer.generateImage() // 子组件中的方法
}
第四步：最后，在子组件1中定义方法即可
generateImage() {
// Do Something
},
到了这里，关于微信小程序：父组件调用子组件的方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
