当前位置：首页 > news >正文

鸿蒙父页面调用子组件页面中的方法

news 2025/2/27 2:32:59

我这里的业务场景是，在父组件中点击隐藏子组件中的弹窗。

先定义一个事件调度器类

export class EventDispatcher {// 定义一个静态成员变量，用于存储子组件方法的引用static hidePop?: () => void;// 发送事件给子组件的方法static dispatchToChildHidePop() {// 检查是否有已注册的子组件方法if (EventDispatcher.childCallback) {// 如果有，则调用该方法并将参数传递给它EventDispatcher.childCallback(value);}}
}

定义子组件：

@Component
export struct ChildComponent {@State showPopup: boolean = false// 在组件即将出现时设置回调函数aboutToAppear(): void {// 注册子组件的方法到事件调度器EventDispatcher.hidePop= () => {// 当事件触发时，调用子组件的方法this.hidePop();};}// 子组件方法hidePop() {this.showPopup = false}// 构建子组件视图build() {Column() {Text('假设这个Text就是我要隐藏的组件').visibility(this.showPopup ? Visibility.Visible : Visibility.None)}.width('100%');}
}

定义父组件：

@Entry
@Component
export struct Page {// 页面构建方法，无需实例化EventDispatcher，因为它是静态类// 页面构建函数build() {Column() {// 创建一个按钮，点击时触发事件调度器的事件Button('调用子组件方法').onClick(() => {EventDispatcher.dispatchToChildHidePop();});// 渲染子组件ChildComponent();}.width('100%');}
}