How to use HarmonyOS NEXT - @Prop and @Link?

@prop decorator: one-way synchronization between father and son
@link decorator: father-son two-way synchronization

The variable decorated by Prop establishes a one-way synchronization relationship with the parent component;
The prop variable is allowed to be modified locally, but the modified changes will not be synchronized back to the parent component.
When the data source changes, the variables decorated by Prop will be updated, and all local changes will be overwritten. Therefore, the synchronization of numerical values is from the parent component to the child component (belonging component), and the change of numerical values of the child component will not be synchronized to the parent component.

A variable decorated with Link shares the same value with the data source in its parent component.

summary
The variable decorated with @ prop can establish a one-way synchronization relationship with the parent component. Variables decorated with Prop are mutable, but changes are not synchronized back to their parent components.
The variable decorated with @ link can establish a two-way synchronization relationship with the parent component.

@prop decorative variable restrictions:
When Prop decorates variables, it will be copied deeply. In the process of copying, except for basic types, Map, Set, Date and Array, all types will be lost. For example, complex types provided by NAPI, such as PixelMap, are partially implemented on the Native side, so it is impossible to obtain complete data on the ArkTS side through deep copy.

Link decorative variable restrictions:
The link decorator cannot be used in a custom component decorated by Entry.
link decorated variables are forbidden to be initialized locally, otherwise an error will be reported at compile time.
The type of link decorated variable should be consistent with the data source type, otherwise the framework will throw a runtime error.

Prop variable decorator must specify the type, and the variable types allowed to be decorated are as follows:
·Object, class, string, number, boolean, enum types, and arrays of these types.
Does not support any, supports undefined and null.
·Support Date type.
·API11 and above support Map and Set types.
·Support the joint types defined by the ArkUI framework, such as Length, ResourceStr and ResourceColor.

Prop and data source types need to be the same. There are three situations:

• When the variable decorated by Prop is synchronized with @State and other decorators, both types must be the same. For example, please refer to the synchronization of simple data types from parent component @State to child component Prop.
• When the variable decorated with Prop is synchronized with the items of @State and other arrays decorated with decorators, the type of Prop needs to be the same as the array items decorated with @State, such as Prop: T and @State: Array. For an example, please refer to the synchronization from the items in the array of parent component @State to the simple data type of child component Prop.
• When the parent component state variable is Object or class, the attribute type of the Prop decorated variable is the same as that of the parent component state variable. For example, please refer to the synchronization from the @State class object attribute in the parent component to the Prop simple type.

Prop supports federated type instances:
Prop supports joint types and undefined and null. In the following example, the animal type is Animals | undefined. Click the Button in the parent component Zoo to change the attribute or type of animal, and the Child will be refreshed accordingly.

Link supports federated type instances:
Link supports union types and undefined and null. In the following example, the name type is string | undefined. Click the Button in the parent component Index to change the attribute or type of the name, and the Child will be refreshed accordingly.

Code example
PropLinkPage

import { LinkComponent } from './components/LinkComponent';
import { PropComponent } from './components/PropComponent';

@Entry
@Component
struct PropLinkPage {
  @State message: string = '@Prop and @Link';
  @State stateCount:number=0;

  build() {
    Column({space:10}) {
      Text(this.message)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)

      Button('增加次数').onClick(()=>{
        this.stateCount++
      })
      Text('stateCount='+this.stateCount)

      PropComponent({propCount:this.stateCount})
      LinkComponent({linkCount:this.stateCount})
    }
    .height('100%')
    .width('100%')
  }
}

PropComponent

@Component
export struct PropComponent{
  @Prop propCount:number=0
  build() {
    Column({space:10}){
      Text('Prop子组件')
      Button('增加次数').onClick(()=>{
        this.propCount++
      })
      Text('propCount='+this.propCount)
    }
    .width('100%')
    .padding(10)
    .backgroundColor(Color.Orange)
  }
}

LinkComponent

@Component
export struct LinkComponent{
  @Link linkCount:number
  build() {
    Column({space:10}){
      Text('Link子组件')
      Button('增加次数').onClick(()=>{
        this.linkCount++
      })

      Text('linkCount='+this.linkCount)
    }
    .width('100%')
    .padding(10)
    .backgroundColor(Color.Pink)
  }
}