HarmonyOS Next ArkUI @State @Prop @Link @Provide @Consume笔记

学习目标:

@State装饰器
@Prop装饰器
@Link装饰器
@Link装饰器
@Provide装饰器
@Consume装饰器


学习内容:

GrandsonComponent

typescript 复制代码
@Component
export struct GrandsonComponent {

  @Consume('provideValue') consumeValue: number

  build() {
    Column(){
      Text('孙组件').fontSize(25)
      Text('consumeValue: ' + this.consumeValue)
      Button('Consume变量测试,父子兄弟都会变')
        .onClick(() => {
          this.consumeValue = Math.floor(Math.random() * (100))
        })
    }
  }
}

HelloComponent

typescript 复制代码
import {GrandsonComponent} from './GrandsonComponent'

@Component
export struct HelloComponent {

  @State stateValue: number = 0
  @Prop  propValue: number = 0
  @Link linkValue: number

  @Consume('provideValue') consumeValue: number

  build() {
    // HelloComponent自定义组件组合系统组件Row和Text
    Column({space:10}) {

      //父子之前双向同步
      Text('stateValue: '+this.stateValue.toString())

      //父->子单项同步
      Text('propValue: '+this.propValue.toString())

      Text('linkValue: '+this.linkValue.toString())

      Text('consumeValue: '+this.consumeValue.toString())

      Button('子State变量测试,只会当前组件变')
      .onClick(() => {
        this.stateValue = Math.floor(Math.random() * (100))
      })

      Button('子Prop变量测试,只会当前组件变')
      .onClick(() => {
        this.propValue = Math.floor(Math.random() * (100))
      })

      Button('子Link变量测试, 子变父也变')
      .onClick(() => {
        this.linkValue = Math.floor(Math.random() * (100));
      })

      GrandsonComponent()

    }.height('100%')
    .width('100%')
  }
}

ParentComponent

typescript 复制代码
import {HelloComponent} from './HelloComponent'
@Entry
@Component
struct ParentComponent {
  // 父组件的变化不会影响子子组件改变
  @State stateValue: number = 1
  // 父组件的变化会影响子子组件改变
  @State propValue: number = 2
  // 父子双向同步
  @State linkValue: number = 3

  @Provide provideValue: number = 5

  build() {

    Column({ space: 5 }) {
      Text('父组件').fontSize(25)
      Divider()
      //父子之前双向同步
      Text('stateValue: ' + this.stateValue.toString())

      //父->子单项同步
      Text('propValue: ' + this.propValue.toString())

      Text('linkValue: ' + this.linkValue.toString())

      Text('provideValue: ' + this.provideValue.toString())

      Button('父State变量测试,只会当前组件变')
      .onClick(() => {
        this.stateValue = Math.floor(Math.random() * (100));
      })

      Button('父Prop变量测试, 父变子也变')
      .onClick(() => {
        this.propValue = Math.floor(Math.random() * (100));
      })

      Button('父Link变量测试,父变子也变')
      .onClick(() => {
        this.linkValue = Math.floor(Math.random() * (100));
      })

      Button('父Provide变量测试,父子兄弟都会变')
        .onClick(() => {
          this.provideValue = Math.floor(Math.random() * (100));
        })

      Text('子组件').fontSize(25)
      Divider()

      HelloComponent({ stateValue: this.stateValue, propValue: this.propValue, linkValue: this.linkValue });

    }
    .height('100%')
    .width('100%')

  }
}

学习产出:

相关推荐
simple丶1 小时前
【HarmonyOS】封装用户鉴权工具类
harmonyos·arkts·arkui
simple丶1 小时前
【HarmonyOS】基于Axios封装网络请求工具类
harmonyos·arkts·arkui
万少2 小时前
2-自然壁纸实战教程-AGC 新建项目
前端·harmonyos
coder_pig16 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
simple丶17 小时前
【HarmonyOS】鸿蒙蓝牙连接与通信技术
harmonyos·arkts·arkui
前端世界18 小时前
HarmonyOS开发实战:鸿蒙分布式生态构建与多设备协同发布全流程详解
分布式·华为·harmonyos
Jalor19 小时前
Flutter + 鸿蒙 | Flutter 跳转鸿蒙原生界面
flutter·harmonyos
zhanshuo20 小时前
开发者必看!如何在HarmonyOS中快速调用摄像头功能
harmonyos
HMSCore20 小时前
借助HarmonyOS SDK,《NBA巅峰对决》实现“分钟级启动”到“秒级进场”
harmonyos
zhanshuo20 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos