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

前提条件

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

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

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

调用步骤

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

  1. 父组件:

<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:

<text>components/game-pages/post-drawer/index.wxmltext>
<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
},

你可能感兴趣的:(微信小程序,微信小程序,小程序)