HarmonyOS Next快速入门：@Prop和@Link

##HarmonyOS Next快速入门##HarmonyOS应用开发##教育##

****************************

@Prop装饰器：父子单向同步 @Link装饰器：父子双向同步

@Prop装饰的变量和父组件建立单向的同步关系：

@Prop变量允许在本地修改，但修改后的变化不会同步回父组件。
当数据源更改时，@Prop装饰的变量都会更新，并且会覆盖本地所有更改。因此，数值的同步是父组件到子组件（所属组件)，子组件数值的变化不会同步到父组件。

@Link装饰的变量与其父组件中的数据源共享相同的值。

总结

@Prop装饰的变量可以和父组件建立单向的同步关系。@Prop装饰的变量是可变的，但是变化不会同步回其父组件。
@Link装饰的变量可以和父组件建立双向的同步关系。

@Prop装饰变量限制条件：

@Prop装饰变量时会进行深拷贝，在拷贝的过程中除了基本类型、Map、Set、Date、Array外，都会丢失类型。例如PixelMap等通过NAPI提供的复杂类型，由于有部分实现在Native侧，因此无法在ArkTS侧通过深拷贝获得完整的数据。

@Link装饰变量限制条件：

@Link装饰器不能在@Entry装饰的自定义组件中使用。
@Link装饰的变量禁止本地初始化，否则编译期会报错。
@Link装饰的变量的类型要和数据源类型保持一致，否则框架会抛出运行时错误。

@Prop变量装饰器必须指定类型，允许装饰的变量类型如下所示：

Object、class、string、number、boolean、enum类型，以及这些类型的数组。
不支持any，支持undefined和null。
支持Date类型。
API11及以上支持Map、Set类型。
支持ArkUI框架定义的联合类型Length、ResourceStr、ResourceColor类型。

@Prop和数据源类型需要相同，有以下三种情况：

@Prop装饰的变量和@State以及其他装饰器同步时双方的类型必须相同，示例请参考父组件@State到子组件@Prop简单数据类型同步。
@Prop装饰的变量和@State以及其他装饰器装饰的数组的项同步时，@Prop的类型需要和@State装饰的数组的数组项相同，比如@Prop : T和@State : Array，示例请参考父组件@State数组中的项到子组件@Prop简单数据类型同步。
当父组件状态变量为Object或者class时，@Prop装饰的变量和父组件状态变量的属性类型相同，示例请参考从父组件中的@State类对象属性到@Prop简单类型的同步。

Prop支持联合类型实例： @Prop支持联合类型和undefined和null，在下面的示例中，animal类型为Animals | undefined，点击父组件Zoo中的Button改变animal的属性或者类型，Child中也会对应刷新。

Link支持联合类型实例： @Link支持联合类型和undefined和null，在下面的示例中，name类型为string | undefined，点击父组件Index中的Button改变name的属性或者类型，Child中也会对应刷新。

代码实例 PropLinkPage

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

@Entry
@Component
struct PropLinkPage {
  @State message: string = '第2节 @Prop和@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)
  }
}

鸿蒙Next快速入门文章被收录于专栏

HarmonyOS Next快速入门