【鸿蒙开发基础】Harmony OS Next-@prop修饰符

1.什么是@prop修饰符

在Harmony OS Next中，@Prop修饰符是在HarmonyOS ArkTS开发中使用的一个装饰器，主要用于实现父子组件之间的单向数据同步。它允许数据从父组件流向子组件，并且在子组件中是只读的，这意味着一旦数据从父组件传递到子组件，它们就不能被子组件修改。

功能和行为

• 数据传递 ：@Prop允许父组件中的数据或状态变量直接初始化子组件中的同名变量 。这包括常规变量、@State、@Link、@Prop、@Provide等多种类型 。
• 初始化行为 ：如果子组件中已经存在同名的本地初始化变量，则@Prop传递的数据是可选的。如果没有本地初始化，则@Prop的数据是必须的 。
• 访问权限 ：@Prop装饰的变量在子组件内部是私有的，这意味着它们不能在组件外部被访问或修改。

使用场景

假设有一个父组件ParentComponent，它有一个状态变量parentData。现在需要将这个变量的值传递给一个子组件ChildComponent，以便子组件可以根据这个数据进行一些显示或处理。可以通过在ChildComponent中声明一个@Prop修饰的变量parentData来实现这一点，这样父组件的parentData变量就可以直接初始化子组件中的parentData变量，实现数据的单向流动。

通过这种方式，@Prop帮助开发者建立了一个清晰的数据流，从父组件到子组件，简化了组件间的通信，并有助于保持组件的独立性和可维护性。

2.使用@prop修饰符

2.1 父组件与子组件的传值关系

我们先定义一个父组件和一个子组件

@Entry
@Component
struct father {
@State gift:number=100

  build() {
 Column({space:12})
 {
   Text('父组件'+this.gift)
     .fontSize(20)
   Button('+1')
     .onClick(()=>{
       this.gift++
     })

   son(
{
gift:this.gift
}
)
 }
    .height('100%')
    .width('100%')



  }
}


@Component struct  son{
  @State gift:number=0
  build() {
    Column()
    {
      Text('子组件'+this.gift)
        .fontSize(20)
       
      Button('+1')
        .onClick(()=>{
          this.gift++
        })
    }


  }
  }

实现效果：这里的父组件和子组件的text都使用了gift变量，目前的需求是我们要让这两个组件中的gift数据保持一致，也就是让父组件对gift进行更改时，子组件也自动进行更改

2.2 使用@prop传值

我们给子组件的gift变量增加一个@prop修饰符后再看一下效果

@Entry
@Component
struct father {
@State gift:number=100

  build() {
 Column({space:12})
 {
   Text('父组件'+this.gift)
     .fontSize(20)
   Button('+1')
     .onClick(()=>{
       this.gift++
     })

   son({
     gift:this.gift
   })
 }
    .height('100%')
    .width('100%')



  }
}


@Component struct  son{
  @Prop gift:number=0
  build() {
    Column()
    {
      Text('子组件'+this.gift)
        .fontSize(20)

      Button('+1')
        .onClick(()=>{
          this.gift++
        })
    }


  }
  }

实现效果：

可以看到，这里的子组件会受到父组件的值影响。父组件的值改变，子组件的值也会跟着改变。但这种改变是单向改变，也就是单向传值，子组件的值改变，父组件的值并不会受到影响。如果想让子组件也可以改变父组件的值，可以使用@Link装饰器实现数据的双向改变。想了解数据的双向改变可以查看下方链接：

【鸿蒙开发基础】@Link装饰器-CSDN博客