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

  }
}

学习产出:

相关推荐
高心星3 小时前
HarmonyOS 5.0应用开发——MVVM模式的应用
harmonyos·mvvm·鸿蒙5.0·备忘录应用
别说我什么都不会4 小时前
【仓颉三方库】工具类—— compress4cj
harmonyos
别说我什么都不会4 小时前
【仓颉三方库】工具类—— uuid4cj
harmonyos
__Benco10 小时前
OpenHarmony - 小型系统内核(LiteOS-A)(十),魔法键使用方法,用户态异常信息说明
人工智能·harmonyos
NapleC1 天前
HarmonyOS:一多能力介绍:一次开发,多端部署
华为·harmonyos
我爱学习_zwj1 天前
【鸿蒙HarmonyOS】深入理解router与Navigation
华为·harmonyos
NapleC1 天前
HarmonyOS:1.7
harmonyos
鸿蒙布道师1 天前
鸿蒙NEXT开发通知工具类(ArkTs)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
鸿蒙布道师1 天前
鸿蒙NEXT开发网络相关工具类(ArkTs)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei