HarmonyOS 鸿蒙应用开发基础：父组件调用子组件方法的几种实现方案对比

news2025/5/23 17:00:14

在ArkUI声明式UI框架中，父组件无法直接调用子组件的方法。本文介绍几种优雅的解决方案，并作出对比分析，分析其适用于不同场景和版本需求。帮助开发者在开发中合理的选择和使用。

方案一：@Watch装饰器（V1版本适用）

通过@Watch装饰器，父组件可以通过改变传递给子组件的@Prop参数来触发子组件的方法。

// 子组件
@Component
struct Child {
  @State message: string = "初始状态"
  @Prop @Watch("trigger") trigger: boolean = false

  // 子组件方法
  onChangeTrigger() {
    this.message = "状态已更新"
    // 可添加业务逻辑
  }

  build() {
    Text(this.message)
      .style({/* 样式设置 */})
  }
}

// 父组件
@Entry
@Component
struct Parent {
  @State trigger: boolean = false

  build() {
    Column() {
      Child({ trigger: this.trigger })
      Button("触发更新")
        .onClick(() => this.trigger = !this.trigger)
    }
  }
}

优点：

官方推荐，实现简单。

缺点：

仅限V1版本。

适用场景：

简单状态触发。

方案二：@Monitor装饰器（V2版本适用）

@Monitor装饰器用于监听传递给子组件的@Param参数的变化，并在参数变化时触发子组件的方法。

// 子组件
@ComponentV2
struct Child {
  @Local message: string = "初始状态"
  @Param trigger: boolean = false

  // 监听参数变化
  @Monitor("trigger")
  onTriggerChange() {
    this.message = "V2版本更新"
    // 业务逻辑
  }

  build() {
    Text(this.message)
      .style({/* 样式设置 */})
  }
}

优点：

V2版本标准方案。

缺点：

不兼容V1版本。

适用场景：

V2版本项目。

方案三：接口回调（通用方案）

通过定义一个控制器类，父组件可以通过该控制器类的回调方法来调用子组件的方法。

// 定义回调接口
class ChildController {
  onAction: () => void = () => {}
}

// 子组件
@Component
struct Child {
  controller: ChildController = new ChildController()
  @State message: string = "等待回调"

  aboutToAppear() {
    this.controller.onAction = () => {
      this.message = "回调触发"
      // 执行复杂逻辑
    }
  }

  build() {
    Text(this.message)
  }
}

// 父组件
@Entry
@Component
struct Parent {
  controller: ChildController = new ChildController()

  build() {
    Column() {
      Child({ controller: this.controller })
      Button("执行回调")
        .onClick(() => this.controller.onAction())
    }
  }
}

优点：

灵活性强，适用于复杂交互场景。

缺点：

需要额外类定义。

适用场景：

复杂交互场景。

方案四：EventHub事件机制（跨组件通信）

利用EventHub实现完全解耦的跨组件通信，父组件通过触发事件来调用子组件的方法。

// 子组件
@Component
struct Child {
  @State message: string = "初始状态"

  aboutToAppear() {
    getContext().eventHub.on("updateChild", () => {
      this.message = "事件触发更新"
      // 网络请求等异步操作
    })
  }

  aboutToDisappear() {
    getContext().eventHub.off("updateChild")
  }

  build() {
    Text(this.message)
  }
}

// 父组件
@Entry
@Component
struct Parent {
  build() {
    Column() {
      Child()
      Button("发送事件")
        .onClick(() => {
          getContext().eventHub.emit("updateChild")
        })
    }
  }
}

优点：

完全解耦，适用于跨组件和远距离通信。

缺点：

需要事件管理，频繁触发可能影响性能。

适用场景：

跨组件/远距离通信。

方案对比与选型建议

方案	适用版本	优点	缺点	适用场景
@Watch	V1	官方推荐，实现简单	仅限V1版本	简单状态触发
@Monitor	V2	V2版本标准方案	不兼容V1版本	V2版本项目
接口回调	全版本	灵活性强，适用于复杂交互场景	需要额外类定义	复杂交互场景
EventHub	全版本	完全解耦，适用于跨组件通信	需要事件管理，频繁触发可能影响性能	跨组件/远距离通信