@State 、@Link 、 @Prop的区别

1. @State 装饰的属性必须设置默认值
2. @State 装饰的属性 可以作为子组件的 数据来源, 当其数值改变时，会引起相关组件的渲染刷新

例如

@Entry
@Component
struct PropAndLinkPage {
//这里必须设置默认值
  @State message: string = 'Hello World';

  build() {
    Column(){

      Text(this.message)
      LinkCompoent({mes: this.message})

      Button('父组件点我').onClick( e => {
        this.message = '在父组件中修改message值为 999'
      })
    }

  }
}

@Component
struct PropCompoent {

  @Prop mes: string //用Prop修饰的成员属性, 接收父组件的传递的 state修饰的参数时, 会自动刷新UI,
  // 但是在子组件内修改成员属性的值, 父组件对应的成员变量的值不会改变并刷新UI
  build() {

    Column() {
      Text(this.mes)
        Button('子组件点我').onClick( e => {
        this.mes = '在子组件中修改mes的值 7777'

      })
    }
  }

}


@Component
struct LinkCompoent {

//这里不能设置默认值, 会报错, 如果这里用State修饰, 则不能够进行和父组件的双向同步
  @Link mes: string   //用Link修饰的成员属性, 接收父组件的传递的 state修饰的参数时, 会自动刷新UI,且在子组件中修改属性值, 会同步到父组件中,且刷新父组件中的UI,
  //@link 类似于传递了指针给子组件

  build() {

    Column() {
      Text(this.mes)
      Button('子组件点我').onClick( e => {
        this.mes = '在子组件中修改mes的值 888'
      })

    }
  }
}

1. @Link 装饰的属性不能设置默认值, 只能通过组件初始化时传值
2. @Link 装饰的属性 变量可以和父组件建立双向同步关系, 当在子组件改变@Link 装饰的属性, 会同步到父组件中传入的@State修饰的属性, 同样在父组件中修改@State, 修饰的属性值, 也会同步到子组件中 @Link 装饰的属性

1. @Prop 装饰的属性 可以设置默认值, 也可以不设置
2. @Prop 装饰的属性 变量可以和父组件建立单向同步关系, 当在子组件改变@Prop 装饰的属性, 不会同步到父组件中传入的@State修饰的属性, 但是在父组件中修改@State, 修饰的属性值, 会同步到子组件中 @Prop 装饰的属性