How to use HarmonyOS NEXT - @Component Custom Component?

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 usually not simply about combining system components, but rather considering factors such as code reusability, separation of business logic and UI, and subsequent version evolution. Therefore, encapsulating UI and some business logic into custom components is an essential capability.

Custom components have the following characteristics:
·Composable: 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.

definition

@Component
struct componentName {
}

·Export custom components through export
·Import custom components through import

Basic structure of custom components
·Struct: Custom components are implemented based on struct. The combination of struct, custom component name, and {...} forms a custom component and cannot have inheritance relationships. For instantiation of struct, new can be omitted.
·The @Component decorator can only decorate data structures declared with the struct keyword. After being decorated with @Component, struct has the ability to be componentized and needs to implement a build method to describe the UI. A struct can only be decorated with one @Component. @Component can accept an optional boolean type parameter.
·The build() function is used to define declarative UI descriptions for custom components, and custom components must define the build() function.
·The custom component decorated with @Entry will serve as the entrance to the UI page. Within a single UI page, up to one custom component can be decorated with @Entry. @Entry can accept an optional LocalStorage parameter.
·The custom components decorated by @Reusable have the ability to be reused.

Member functions/variables
In addition to implementing the build() function, custom components can also implement other member functions, which have the following constraints: the member functions of custom components are private and are not recommended to be declared as static functions.

Custom components can contain member variables, which have the following constraints:
·Member variables of custom components are private and are not recommended to be declared as static variables.
·Local initialization of member variables for custom components can be optional or mandatory. Whether local initialization is required and whether member variables of child components need to be initialized by passing parameters from the parent component, please refer to state management.

Code Examples

import { Home } from './components/Home';
import { Person } from './components/Person';

@Entry
@Component
struct ComponentPage {
  @State message: string = ' @Component Custom Component ';

  build() {
    Column() {
      Text( this.message )
        .fontSize(20)
        .fontWeight( FontWeight.Bold )

      Tabs() {
        TabContent() {
          // Modular development through custom components
          Home({ message:' hello world! '})
        }.tabBar(' Home ')

        TabContent() {
          Person({data:'hello'})
        }.tabBar(' Personal Center ')
      }
    }
    .height(' 100% ')
    .width(' 100% ')
  }
}