HarmonyOS NEXT实战:父子组件间调用函数

简介: 在ArkUI开发中,自定义组件是构建高效、可维护UI的关键。通过封装系统组件与业务逻辑,实现组件复用与数据驱动更新,提升代码结构与开发效率。本文详解父子组件间函数调用的实现方式,并提供实战示例,帮助开发者掌握HarmonyOS Next应用服务开发中的关键通信机制,适用于教育与项目实践场景。

HarmonyOS Next实战##HarmonyOS SDK应用服务##教育

参考资料:
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-create-custom-components#%E6%88%90%E5%91%98%E5%87%BD%E6%95%B0%E5%8F%98%E9%87%8F

在ArkUI中,UI显示的内容均为组件,由框架直接提供的称为系统组件,由开发者定义的称为自定义组件。进行UI界面开发时,不仅要组合使用系统组件,还需考虑代码的可复用性、业务逻辑与UI的分离,以及后续版本的演进等因素。因此,将UI和部分业务逻辑封装成自定义组件是不可或缺的能力。

自定义组件具有以下特点:

  • 可组合:允许开发者组合使用系统组件、及其属性和方法。
  • 可重用:自定义组件可以被其他组件重用,并作为不同的实例在不同的父组件或容器中使用。
  • 数据驱动UI更新:通过状态变量的改变,来驱动UI的刷新。

自定义组件是如此的常见,那么在父子组件间,就不可避免地会出现函数调用的问题。例如:父组件如何调用子组件的函数?子组件又如何调用父组件的函数?这是我们在项目开发中,往往不可避免会遇到的问题。

父子组件间调用函数是常见的交互需求,主要用于实现组件间的通信和功能协作。父子组件间调用函数的常见场景:

  • 父组件需要主动触发子组件的内部逻辑(如:父组件需要控制子组件的表单重置、父组件需要触发子组件的动画或数据刷新、执行特定操作等)
  • 子组件需要向父组件传递数据或触发父组件的逻辑(如:子组件表单提交后通知父组件保存数据、子组件用户操作后触发父组件的逻辑等)。
  • 父子组件需要频繁交互,例如父组件控制子组件状态,子组件状态变化时通知父组件。(如:表单输入框的双向绑定、父子组件状态同步(如开关、选择器)等)

以下为实战代码示例:
父组件调用子组件函数

@Entry
@Component
struct CallSubComponentMethodPage {
   
  private childController = new ChildController()
  private count: number = 0

  build() {
   
    Column({
    space: 10 }) {
   
      Text('CallSubComponentMethod Page')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)

      Button('CallSubComponentMethod').onClick(() => {
   
        this.count++
        this.childController.changeText(`this is text from parent, and count = ${
     this.count}`)
      })

      Child({
    childController: this.childController })
    }
    .height('100%')
    .width('100%')
  }
}

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

@Component
struct Child {
   
  @State private text: string = 'this is child text'
  childController: ChildController = new ChildController();

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

  //封装的能力
  private changeText = (value: string) => {
   
    this.text = value
  }

  build() {
   
    Column() {
   
      Text(this.text)
    }
    .backgroundColor('#EEEEEE')
    .width('90%')
    .height(100)
    .justifyContent(FlexAlign.Center)
  }
}

子组件调用父组件函数

@Entry
@Component
struct CallParentComponentMethodPage {
   
  @State sonClickCount: number = 0

  build() {
   
    Column({
    space: 10 }) {
   
      Text('CallParentComponentMethod Page')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
      Text(`sonClickCount = ${
     this.sonClickCount}`)

      Son({
   
        onSonClick: (count: number) => {
   
          this.sonClickCount = count
        }
      })
    }
    .height('100%')
    .width('100%')
  }
}

@Component
struct Son {
   
  private count: number = 0
  @Require onSonClick: (count: number) => void = (count: number) => {
   
  }

  build() {
   
    Column({
    space: 10 }) {
   
      Text('Son Component')
      Button('Son Click').onClick(() => {
   
        this.count++
        this.onSonClick(this.count)
      })
    }
    .backgroundColor('#EEEEEE')
    .width('90%')
    .height(200)
    .padding(10)
  }
}
目录
相关文章
|
4月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
仓颉语言实战分享,教你如何用仓颉开发外卖App界面。内容包括页面布局、导航栏自定义、搜索框实现、列表模块构建等,附完整代码示例。轻松掌握Scroll、List等组件使用技巧,提升HarmonyOS应用开发能力。
|
3月前
|
移动开发 前端开发 JavaScript
鸿蒙NEXT时代你所不知道的全平台跨端框架:CMP、Kuikly、Lynx、uni-app x等
本篇基于当前各大活跃的跨端框架的现状,对比当前它们的情况和未来的可能,帮助你在选择框架时更好理解它们的特点和差异。
312 0
|
4月前
|
安全 API 开发工具
【HarmonyOS NEXT】一键扫码功能
这些Kit为我们应用开发提升了极大地效率。很多简单的功能,如果不需要太深的定制化需求,直接调用kit提供的API就可以实现,在android或者ios上需要很多代码才能实现的功能效果。
119 0
HarmonyOS NEXT仓颉开发语言实战案例:电影App
周末好!本文分享使用仓颉语言重构ArkTS实现的电影App案例,对比两者在UI布局、组件写法及语法差异。内容包括页面结构、列表分组、分类切换与电影展示等。通过代码演示仓颉在HarmonyOS开发中的应用。##仓颉##ArkTS##HarmonyOS开发
|
4月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:健身App
本期分享一个健身App首页的布局实现,顶部采用Stack容器实现重叠背景与偏移效果,列表部分使用List结合Scroll实现可滚动内容。代码结构清晰,适合学习HarmonyOS布局技巧。
HarmonyOS NEXT仓颉开发语言实战案例:小而美的旅行App
本文分享了一个旅行App首页的设计与实现,使用List容器搭配Row、Column布局完成个人信息、功能列表及推荐模块的排版,详细展示了HarmonyOS下的界面构建技巧。
|
18天前
|
存储 缓存 5G
鸿蒙 HarmonyOS NEXT端云一体化开发-云存储篇
本文介绍用户登录后获取昵称、头像的方法,包括通过云端API和AppStorage两种方式,并实现上传头像至云存储及更新用户信息。同时解决图片缓存问题,添加上传进度提示,支持自动登录判断,提升用户体验。
90 0
|
18天前
|
存储 负载均衡 数据库
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
本文介绍基于华为AGC的端云一体化开发流程,涵盖项目创建、云函数开通、应用配置及DevEco集成。重点讲解云函数的编写、部署、调用与传参,并涉及环境变量设置、负载均衡、重试机制与熔断策略等高阶特性,助力开发者高效构建稳定云端服务。
178 0
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
|
18天前
|
存储 JSON 数据建模
鸿蒙 HarmonyOS NEXT端云一体化开发-云数据库篇
云数据库采用存储区、对象类型、对象三级结构,支持灵活的数据建模与权限管理,可通过AGC平台或本地项目初始化,实现数据的增删改查及端侧高效调用。
50 0
|
18天前
|
存储 开发者 容器
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
本文介绍了ArkTS语言中的Class类、泛型、接口、模块化、自定义组件及状态管理等核心概念,并结合代码示例讲解了对象属性、构造方法、继承、静态成员、访问修饰符等内容,同时涵盖了路由管理、生命周期和Stage模型等应用开发关键知识点。
150 0
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例