05-鸿蒙学习之State、Prop、Link用法

05-鸿蒙学习之State、Prop、Link用法

@Entry
@Component
struct StateMangement {
  // @State 必须初始化
  @State name: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.name).StateMangement_textStyle()
        Button('点击').StateMangement_btnStyle(() => {
          this.name = this.name === '1' ? '1' : '2'
        })
        Divider()
        mychild({ content: this.name })
        Divider()
        // StateManagement_link({content_link:this.name})
        // 如果市state ----》link 参数传递时，使用$ 变量名进行传递
        StateManagement_link({content_link:$name})
      }
      .width('100%')
    }
    .height('100%')
  }
}
// 存放一个 @prop 装饰的状态数据，方便父子组件之间进行数据传递和同步 State ----》prop
@Component
struct mychild {
  @Prop content: string

  build() {
    Column() {
      Text('prop:' + this.content).StateMangement_textStyle()
      Button('修改prop数据').StateMangement_btnStyle(() => {
        this.content = '子组件不能修改父组件数据'
      })
    }
  }
}

// 存放 link 数据
@Component
struct StateManagement_link {
  @Link content_link: string

  build() {
    Column(){
      Text('link:' + this.content_link)
      Button("修改Link数据").StateMangement_btnStyle(()=>{
        this.content_link = "子组件同步修改父组件数据"
      })
    }

  }
}
// 同样的样式需要复用

@Extend(Text) function StateMangement_textStyle() {
  .fontSize(50)
  .fontWeight(FontWeight.Bold)
  .fontColor(Color.Green)
}

// 按钮样式
@Extend(Button) function StateMangement_btnStyle(click: Function) {
  .fontSize(30)
  .onClick(() => {
    click()
  })
}