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%')

  }
}

学习产出:

相关推荐
前端世界1 小时前
鸿蒙系统安全机制全解:安全启动 + 沙箱 + 动态权限实战落地指南
android·安全·harmonyos
长弓三石3 小时前
鸿蒙网络编程系列57-仓颉版固定包头可变包体解决TCP粘包问题
网络·tcp/ip·harmonyos
zhanshuo4 小时前
HarmonyOS 隐私安全机制实战:动态权限、沙箱隔离与分布式授权
harmonyos
zhanshuo4 小时前
鸿蒙系统防黑秘籍:如何彻底防止恶意应用窃取用户数据?
harmonyos
财经三剑客8 小时前
鸿蒙智行6月交付新车52747辆 单日交付量3651辆
华为·harmonyos
睿麒8 小时前
鸿蒙app 开发中的 map 映射方式和用法
华为·harmonyos
zhanshuo10 小时前
鸿蒙 Secure Boot 全流程解析:从 BootROM 到内核签名验证的实战指南
harmonyos
zhanshuo10 小时前
鸿蒙系统安全机制全解:安全启动 + 沙箱 + 动态权限实战落地指南
harmonyos
塞尔维亚大汉10 小时前
鸿蒙内核源码分析(用户态锁篇) | 如何使用快锁Futex(上)
harmonyos·源码阅读
爱笑的眼睛1120 小时前
08-自然壁纸实战教程-视频列表-云
华为·harmonyos