HarmonyOS NEXT父组件如何调用子组件的方法?

2025-01-03 10:58:29
38次阅读
0个评论

问题描述:HarmonyOS NEXT父组件如何调用子组件的方法

应用场景:

父组件中有一个收藏话题列表,在父组件击取消收藏后,对应的子组件中的 收藏状态也需要同步更新,这里就涉及到:父组件中需要触发子组件的方法

解决方案一:

可以定义一个controller类,在controller类中定义和子组件中类型相同的方法,在子组件中将实际封装的方法给到controller。父组件在使用时,new一个controller对象然后传入子组件,在父组件中调用controller对应的方法即可。

参考代码:

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

  aboutToAppear() {
    if (this.controller) {
      // 给controller对应的方法赋值
      this.controller.changeText = this.changeText;
    }
  }

  private changeText = (value: string) => {
    this.text = value;
  }

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

// 定义controller对象
class ChildController {
  changeText = (value: string) => {
  }
}

@Entry
@Component
struct Parent {
  private ChildRef = new ChildController();

  build() {
    Column() {
      Text('调用Child的changeText')
        .fontSize('18vp')
        .fontColor(Color.Gray)
      Divider()
      Child({ controller: this.ChildRef }) // 将new之后的controller对象传入子组件
      Button('Parent调用child的changeText')
        .onClick(() => {
          this.ChildRef.changeText('Parent调用child的changeText');
        })
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
  }
}

解决方法二

使用Emitter进行【线程间通信】:在父组件发送事件,子组件或其他组件里面监听事件和数据变化,来触发子组件里面的其他方法,这样也能实现父组件调用子组件;反之也能实现子组件触发父组件的方法

好处:可以跨组件, 注意:需要在公共文件里面订阅好 不同Emitter事件的不同eventId 标识,避免互相干扰

发布事件

import { emitter } from '@kit.BasicServicesKit';


// 定义一个eventId为1的发送事件,事件优先级为Low
let event: emitter.InnerEvent = {
  eventId: 1,
  priority: emitter.EventPriority.LOW
};

let eventData: emitter.EventData = {
  data: {
    content: 'c',
    id: 1,
    isEmpty: false
  }
};

// 发送eventId为1的事件,事件内容为eventData
emitter.emit(event, eventData);

订阅事件

import { emitter } from '@kit.BasicServicesKit';
import { promptAction } from '@kit.ArkUI';
import { hilog } from '@kit.PerformanceAnalysisKit';

const TAG: string = 'ThreadModel';
const DOMAIN_NUMBER: number = 0xFF00;

// 定义一个eventId为1的接收事件
let event: emitter.InnerEvent = {
  eventId: 1
};

// 收到eventId为1的事件后执行该回调,这里就是编写其他函数
let callback = (eventData: emitter.EventData): void => {
  promptAction.showToast({
    message: JSON.stringify(eventData)
  });
  hilog.info(DOMAIN_NUMBER, TAG, 'event callback:' + JSON.stringify(eventData));
};

// 订阅eventId为1的事件,接收到数据后,立刻触发回调函数
emitter.on(event, callback);
promptAction.showToast({
  message: JSON.stringify('emitter subscribe success')
});





收藏00

登录 后评论。没有帐号? 注册 一个。