HarmonyOS NEXT project practice：Call functions between parent-child components

reference material:
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

In ArkUI, the content displayed by the UI is all components. Components directly provided by the framework are called system components, while those defined by the developer are called custom components. When developing UI interfaces, it is not only necessary to combine system components, but also to consider factors such as code reusability, separation of business logic and UI, and evolution of subsequent versions. Therefore, encapsulating UI and some business logic into custom components is an essential capability.

Custom components have the following characteristics:

• Combatable: allows developers to combine system components, their properties, and methods.
• Reusable: Custom components can be reused by other components and used as different instances in different parent components or containers.
• Data driven UI update: driving UI refresh through changes in state variables.

Custom components are so common that function calling issues are inevitable between parent and child components. For example, how does the parent component call the function of the child component? How do child components call the functions of the parent component? This is a problem that we often inevitably encounter in project development.

Calling functions between parent and child components is a common interaction requirement, mainly used to achieve communication and functional collaboration between components. Common scenarios for calling functions between parent-child components:

• The parent component needs to actively trigger the internal logic of the child component (such as: the parent component needs to control the form reset of the child component, the parent component needs to trigger the animation or data refresh of the child component, perform specific operations, etc.)
• The child component needs to pass data to the parent component or trigger the logic of the parent component (such as notifying the parent component to save data after the child component form is submitted, triggering the logic of the parent component after the child component user operates, etc.).
• Parent child components require frequent interaction, for example, the parent component controls the state of the child component and notifies the parent component when the state of the child component changes. (such as bidirectional binding of form input boxes, synchronization of parent-child component states (such as switches, selectors), etc.)

The following is an example of practical code:
The parent component calls the child component function

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

Child component calls parent component function

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