鸿蒙开发:父组件如何调用子组件中的方法?

前言

本文基于Api13

很多的场景下,父组件需要触发子组件中的某个方法,来实现一些特定的逻辑,但是ArkUI是声明式UI,不能直接调用子组件中的方法,那么怎么去实现这个功能呢?

举一个很常见的案例,通过调用子组件中的某个方法,实现子组件UI的更新,简单的代码如下,只有通过调用changeUI方法,才会触发UI的更新。

TypeScript 复制代码
@Component
struct Child {
  @State message: string = "我是子组件"

  /**
   *AUTHOR:AbnerMing
   *INTRODUCE:子组件方法
   */
  changeUI() {
    this.message = "子组件UI更新了"
  }

  build() {
    Text(this.message)
      .width("100%")
      .height(50)
      .backgroundColor(Color.Pink)
      .textAlign(TextAlign.Center)
  }
}

方式一:@Watch装饰器

如果你是用的V1版本装饰器,我们可以使用@Watch装饰器很轻松进行实现。

子组件定义@Watch装饰器

TypeScript 复制代码
@Component
struct Child {
  @State message: string = "我是子组件"
  @Prop @Watch("changeUI") isChangeStatus: boolean = false

  /**
   *AUTHOR:AbnerMing
   *INTRODUCE:子组件方法
   */
  changeUI() {
    this.message = "子组件UI更新了"
  }

  build() {
    Text(this.message)
      .width("100%")
      .height(50)
      .backgroundColor(Color.Pink)
      .textAlign(TextAlign.Center)
  }
}

父组件调用

可通过子组件定义的isChangeStatus属性,不断的变化其值就可以了。

TypeScript 复制代码
@Entry
  @Component
  struct DemoPage {
    @State isChangeStatus: boolean = false

    build() {
      Column() {
        Child({ isChangeStatus: this.isChangeStatus })
        Button("点击")
          .onClick(() => {
            this.isChangeStatus = !this.isChangeStatus
          })
      }
      .height('100%')
        .width('100%')
        .justifyContent(FlexAlign.Center)
    }
  }

方式二:@Monitor装饰器

和方式一的实现方式是一致的,只不过,@Monitor装饰器是V2版本,也就是说,你使用的是V2版本装饰器的话,可以使用这个。

子组件定义@Monitor装饰器

TypeScript 复制代码
@ComponentV2
struct Child {
  @Local message: string = "我是子组件"
  @Param isChangeStatus: boolean = false

  /**
   *AUTHOR:AbnerMing
   *INTRODUCE:子组件方法
   */
  @Monitor("isChangeStatus")
  changeUI() {
    this.message = "子组件UI更新了"
  }

  build() {
    Text(this.message)
      .width("100%")
      .height(50)
      .backgroundColor(Color.Pink)
      .textAlign(TextAlign.Center)
  }
}

父组件调用

TypeScript 复制代码
@Entry
@ComponentV2
struct DemoPage {
  @Local isChangeStatus: boolean = false

  build() {
    Column() {
      Child({ isChangeStatus: this.isChangeStatus })
      Button("点击")
        .onClick(() => {
          this.isChangeStatus = !this.isChangeStatus
        })
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

方式三:接口回调

定义回调函数

TypeScript 复制代码
class ChangeController {
  change = () => {}
}

子组件实现回调

TypeScript 复制代码
@Component
struct Child {
  @State message: string = "我是子组件"
  changeController: ChangeController = new ChangeController()

  aboutToAppear(): void {
    if (this.changeController.change != undefined) {
      this.changeController.change = () => {
        this.changeUI()
      }
    }
  }

  /**
   *AUTHOR:AbnerMing
   *INTRODUCE:子组件方法
   */
  changeUI() {
    this.message = "子组件UI更新了"
  }

  build() {
    Text(this.message)
      .width("100%")
      .height(50)
      .backgroundColor(Color.Pink)
      .textAlign(TextAlign.Center)
  }
}

父组件调用函数

TypeScript 复制代码
@Entry
@Component
struct DemoPage {
  changeController: ChangeController = new ChangeController()

  build() {
    Column() {
      Child({ changeController: this.changeController })
      Button("点击")
        .onClick(() => {
          this.changeController.change()
        })
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

方式四:事件订阅EventHub

订阅事件

TypeScript 复制代码
@Component
struct Child {
  @State message: string = "我是子组件"

  aboutToAppear(): void {
    getContext().eventHub.on("changeUI", ()=>{
      this.changeUI()
    })
  }

  /**
   *AUTHOR:AbnerMing
   *INTRODUCE:子组件方法
   */
  changeUI() {
    this.message = "子组件UI更新了"
  }

  build() {
    Text(this.message)
      .width("100%")
      .height(50)
      .backgroundColor(Color.Pink)
      .textAlign(TextAlign.Center)
  }
}

触发事件

TypeScript 复制代码
@Entry
@Component
struct DemoPage {
  build() {
    Column() {
      Child()
      Button("点击")
        .onClick(() => {
          getContext().eventHub.emit('changeUI')
        })
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

相关总结

也许大家可能会有疑问,子组件更新UI,直接由装饰器触发不就行了,希望大家能够明白,以上呢只是简单的案例,在实际的开发中,子组件方法中可能很多的逻辑,比如网络请求,比如数据存储等等,并不是简单的UI更新。

当然了,所举的实现方式也不是全的,可能也有着其它的方式可以实现,大家在实际的开发中选择适合的一种即可。

相关推荐
每次的天空9 分钟前
Android-自定义View的实战学习总结
android·学习·kotlin·音视频
恋猫de小郭36 分钟前
Flutter Widget Preview 功能已合并到 master,提前在体验毛坯的预览支持
android·flutter·ios
断剑重铸之日2 小时前
Android自定义相机开发(类似OCR扫描相机)
android
随心最为安2 小时前
Android Library Maven 发布完整流程指南
android
岁月玲珑2 小时前
【使用Android Studio调试手机app时候手机老掉线问题】
android·ide·android studio
万少4 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
幽蓝计划5 小时前
HarmonyOS NEXT仓颉开发语言实战案例:电影App
华为·harmonyos
还鮟6 小时前
CTF Web的数组巧用
android
点金石游戏出海6 小时前
每周资讯 | Krafton斥资750亿日元收购日本动画公司ADK;《崩坏:星穹铁道》新版本首日登顶iOS畅销榜
游戏·ios·业界资讯·apple·崩坏星穹铁道
HMS Core7 小时前
HarmonyOS免密认证方案 助力应用登录安全升级
安全·华为·harmonyos