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)
  }
}