HarmonyOS next中如何实现父容器主动调用子组件中的方法？

Question

声明式UI中如何实现主动调用子组件的方法？

Answer 1

可以定义一个 controller 类，在 controller 类中定义和子组件中类型相同的方法，在子组件中将实际封装的方法给到 controller。父组件在使用时，new 一个 controller 对象然后转入子类中，在父组件中调用 controller 对应的方法即可。示例代码如下：

@Component
struct Child {
  @State private text: string = '初始值';
  private controller: ChildController = new ChildController();

  aboutToAppear() {
    if (this.controller) {
      this.controller.changeText = this.changeText;
    }
    console.log('aaa');
  }

  private changeText = (value: string) => {
    this.text = value;
    console.log('bbb');
  };

  build() {
    Column() {
      Text(this.text);
    }
  }
}

class ChildController {
  changeText = (value: string) => {
    console.log('11111');
  };
}

export let ChildRef = new ChildController();

@Entry
@Component
struct Parent {
  // ChildRef = new ChildController()
  @State noShow: boolean = false;

  build() {
    Column() {
      Text('获取 Child 的 exposeMethods!').fontSize('18vp').fontColor(Color.Gray);
      Divider();
      Child({ controller: ChildRef });
      Child();
      Button('Parent 调用 childer 的 changeText').onClick(() => {
        this.ChildRef.changeText('Parent 调用 childer 的 changeText');
      });
    }
   .justifyContent(FlexAlign.Center)
   .width("100%")
   .height("100%");
  }
}