【鸿蒙应用ArkTS开发系列】- 父组件直接调用子组件方法_鸿蒙 父组件调用子组件方法

今天这篇文档，讲的是鸿蒙应用开发中会遇到的一种常见场景，父组件显式调用子组件的方法。

最近很多同学反馈，在鸿蒙ArkTS 应用开发过程中，在对页面的页面层级进行梳理，抽取子组件的时候，由于一些原先写在页面Page中的方法会定义到子组件component中去，但是有些场景需要在父组件中调用子组件的方法。

有些同学可能会考虑使用事件来进行处理，但是对于一些同步调用的场景，比如调用子组件的一个方法，然后同步返回一个数据，这种场景使用事件，无法实现，如果使用事件，定义双向事件接收数据，会使代码的可读性变差，也会使代码功能变得复杂。

下面介绍一种官方提供的父组件显式调用子组件的方法（官方文档中有提到，很多同学可能没有留意到）

**

1. 创建子组件ChildComponent

**

import { ChildComponentController } from './ChildComponentController';
@Component
export struct ChildComponent {
  @State message: string = 'Hello World From ChildComponent'
  public mCmpController: ChildComponentController = null;

  aboutToAppear() {
    if (this.mCmpController) {
      this.mCmpController.attach(this); //绑定控制器
    }
  }

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(25)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
    .backgroundColor(Color.Blue)
  }

  getName(): string {
    return 'my name is ChildComponent!';
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

这里子组件ChildComponent 提供一个getName的方法提供父组件调用。

**

接下来我们为ChildComponent 创建组件控制器ChildComponentController

2. 创建组件控制器ChildComponentController

**

import { ChildComponent } from './ChildComponent';

export class ChildComponentController {
  private mComponent: ChildComponent = null;

  attach(component: ChildComponent) {
    this.mComponent = component;
  }

  public getName(): string {
    if (this.mComponent) {
      return this.mComponent.getName();
    }
    return '';
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

子组件控制器提供了一个attach方法，通过该方法将其与组件进行绑定（实际上就是持有组件实例），通过上面代码我们知道，在子组件ChildComponent的aboutToAppear函数中，我们进行了attach的调用，那子组件需要一个控制器实例，这个控制器实例从哪里获取呢，其实就是父组件引用子组件的时候设置的。

子组件除了attach方法外，我们还看到了一个getName方法，这个方法只是一个代理方法，具体实现是在子组件中完成。

**
最后 在ParentComponent 创建ChildComponentController实例，使用控制器显式调用子组件的方法

3. 创建ChildComponentController实例，调用子组件的方法

**

import { ChildComponent } from './ChildComponent'
import { ChildComponentController } from './ChildComponentController';

@Component
export struct ParentComponent {
  @State message: string = ''
  private mChildComponentController: ChildComponentController = new ChildComponentController();

  build() {
    Row() {
      Column() {

        Column() {
          Text('ParentComponent')
            .fontSize(25)
            .fontWeight(FontWeight.Bold)
            
          Button("调用子组件方法")
            .width("80%")
            .height("50vp")
            .margin({ top: "10vp", bottom: '10vp' })
            .onClick(() => {
              this.message = this.mChildComponentController.getName();
            })
            
          Text(this.message)
            .fontSize(25)
        }
        .height('50%')
        .justifyContent(FlexAlign.Center)

        ChildComponent({ mCmpController: this.mChildComponentController })
          .height('50%')
      }
      .width('100%')
    }
    .height('100%')
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

父组件ParentComponent 在build方法中引用ChildComponent的时候，
ChildComponent({ mCmpController: this.mChildComponentController })
将创建的ChildComponentController 设置到子组件中。子组件创建的时候将自身实例通过ChildComponentController 的attach进行绑定，父组件通过ChildComponentController 调用子组件的getName方法。

代码简简单单，希望能够解决同学们在实际开发中遇到的问题。