鸿蒙ArkTS装饰器@Prop、@Link、@Provide和@Consume详解

文
章
目
录

• @Prop
• @Link
• @Provide和@Consume

本文主要讲解关于鸿蒙ArkTS装饰器@Prop、@Link、@Provide和@Consume详解相关内容，让我们来一起学习下吧！

@Prop

概述

@Prop与@State有相同的语义，但初始化方式不同。@Prop装饰的变量必须使用其父组件提供的@State变量进行初始化，允许组件内部修改@Prop变量，但变量的更改不会通知给父组件，父组件变量的更改会同步到@prop装饰的变量，即@Prop属于单向数据绑定。

@Prop状态数据具有以下特征：

• 支持多种类型数据：支持class、number、boolean、string强类型数据的值类型和引用
• 类型，以及这些强类型构成的数组，即Array、Array、Array、Array。不支持any。
• 私有：仅支持组件内访问；
• 单个数据源：父组件中用于初始化子组件@Prop变量的必须是父组件定义的状态变量；
• 单向通信：子组件对@Prop变量的更改将不会同步修改父组件中的@State变量，父组件中@State的变量修改将会同步给子组件中的@Prop变量；
• 创建自定义组件时将按值传递方式给@Prop变量进行初始化：在创建组件的新实例时，必须初始化所有@Prop变量，不支持在组件内部进行初始化。

@Link

@Link装饰的变量可以和父组件的@State变量建立双向数据绑定：

• 1、支持多种类型：@Link支持的数据类型与@State相同，即class、number、string、boolean或这些类型的数组；
• 2、私有：仅支持组件内访问；
• 3、单个数据源：父组件中用于初始化子组件@Link变量的必须是父组件定义的状态变量；
• 4、双向通信：子组件对@Link变量的更改将同步修改父组件中的@State变量；
• 5、创建自定义组件时需要将变量的引用传递给@Link变量，在创建组件的新实例时，必须使用命名参数初始化所有@Link变量。@Link变量可以使用@State变量或@Link变量的引用进行初始化，@State变量可以通过’$’操作符创建引用。
• 6、@Link变量不能在组件内部进行初始化。

下面的示例是演示Child组件中的count变量是@Prop修饰的，Child2组件中的count变量是@Link修饰的，当点击Child组件的按钮时会发现只有Child组件count数据更新并更新了界面，当点击Child2组件的按钮时会发现所有的count数据都更新并且界面更新了，当点击父组件的按钮也会发现所有的组件中count数据发生了更新并且界面发生更新了

import router from \'@ohos.router\';
@Entry
@Component
struct Second {
  @State message: string = \'Hello World Second\'
  @State num: number = 1

  build() {
    Row() {
      Column() {
        this.TextBuild()
        Child({ count: this.num })
        Child2({ count: $num })
        Button() {
          Text(\'Back\')
            .fontSize(45)
            .fontColor($r(\'app.color.start_window_background\'))
        }
        .type(ButtonType.Capsule)
        .width(\'60%\')
        .height(\'10%\')
        .backgroundColor($r(\'app.color.button_next_background\'))
        .onClick(() => {
          router.back()
        })

        Button() {
          Text(`Num++ ${this.num}`)
            .fontSize(45)
            .fontColor($r(\'app.color.start_window_background\'))
        }
        .type(ButtonType.Capsule)
        .width(\'60%\')
        .height(\'10%\')
        .backgroundColor($r(\'app.color.button_next_background\'))
        .margin({ top: 20 })
        .onClick(() => {
          this.num++
        })
      }
      .width(\'100%\')
    }
    .height(\'100%\')
  }

  @Builder TextBuild(){
    Text(this.message)
      .align(Alignment.Center)
      .fontSize(40)
      .fontWeight(FontWeight.Bold)
  }
}

@Component
struct Child {
  //父组件可以改变子组件，子组件不能改变父组件
  @Prop count: number

  build() {
    Column() {
      Text(`You have ${this.count} Nuggets left`).fontSize(18)
      Button(\'count - costOfOneAttempt\')
        .margin(15)
        .onClick(() => {
          this.count--
        })
    }
  }
}

@Component
struct Child2 {
  //父组件与子组件双向绑定
  @Link count: number

  build() {
    Column() {
      Text(`You have ${this.count} Nuggets left`).fontSize(18)
      Button(\'count - costOfOneAttempt\')
        .margin(15)
        .onClick(() => {
          this.count--
        })
    }
  }
}

@Provide和@Consume

• 1、@Provide作为数据的提供方，可以更新其子孙节点的数据，并触发页面渲染。@Consume在感知到
• 2、@Provide数据的更新后，会触发当前自定义组件的重新渲染。
• 3、@Provide
  • 装饰器参数是一个string类型的常量，用于给装饰的变量起别名。如果规定别名，则提供对应别名的数据更新。如果没有，则使用变量名作为别名。推荐使用@Provide(‘alias’)这种形式。
  • 同步机制：@Provide的变量类似@State，可以修改对应变量进行页面重新渲染。也可以修改@Consume装饰的变量，反向修改@State变量。
  • 必须设置初始值。
  • 触发页面渲染的修改：基础类型（boolean，string，number）变量的改变；@Observed class类型变量及其属性的修改；添加，删除，更新数组中的元素。
• @Consume
  • 不可设置默认初始值。

示例：

import router from \'@ohos.router\';

@Entry
@Component
struct Third {
  //因为是数组所以需要用到@ObjectLink和@Observed
  @State arrA: ClassA[] = [new ClassA(2), new ClassA(0)]
  //此修饰符与@Consume组合可以让其与孙子节点数据双向绑定
  @Provide(\"reviewVote\") reviewVotes: number = 0;

  build() {
    Row() {
      Column() {
        ForEach(this.arrA, (item) => {
          TextChild({ a: item })
        }, (item) => item.id.toString())
        ForEach(this.arrA, (item) => {
          Child({ a: item })
        }, (item) => item.id.toString())
        Button() {
          Text(\'Back\')
            .fontSize(45)
            .fontColor($r(\'app.color.start_window_background\'))
        }
        .type(ButtonType.Capsule)
        .width(\'60%\')
        .height(\'10%\')
        .backgroundColor($r(\'app.color.button_next_background\'))
        .onClick(() => {
          router.back()
        })

        Button() {
          Text(\'Add\')
            .fontSize(45)
            .fontColor($r(\'app.color.start_window_background\'))
        }
        .type(ButtonType.Capsule)
        .width(\'60%\')
        .height(\'5%\')
        .backgroundColor($r(\'app.color.button_next_background\'))
        .margin({ top: 20 })
        .onClick(() => {
          this.arrA[0].c++
        })
        Button() {
          Text(\'AddChildChild\'+this.reviewVotes)
            .fontSize(25)
            .fontColor($r(\'app.color.start_window_background\'))
        }
        .type(ButtonType.Capsule)
        .width(\'60%\')
        .height(\'10%\')
        .backgroundColor($r(\'app.color.button_next_background\'))
        .margin({ top: 20 })
        .onClick(() => {
          this.reviewVotes++
        })
      }
      .width(\'100%\')
    }
    .height(\'100%\')
  }
}

@Component
struct TextChild {
  @ObjectLink a: ClassA

  build() {
    Column() {
      Text(this.a.c + \"TextChild\")
        .align(Alignment.Center)
        .fontSize(40)
        .fontWeight(FontWeight.Bold)
      TextChildChild()
    }
  }
}

@Component
struct TextChildChild {
  //此修饰符与爷爷组件的@Provide组合可以与爷爷组件双向绑定
  @Consume(\"reviewVote\") reviewVotes: number

  build() {
    Column() {
      Button() {
        Text(\'RemoveChildChild\'+this.reviewVotes)
          .fontSize(20)
          .fontColor($r(\'app.color.start_window_background\'))
      }
      .type(ButtonType.Capsule)
      .width(\'60%\')
      .height(\'5%\')
      .backgroundColor($r(\'app.color.button_next_background\'))
      .margin({ top: 20 })
      .onClick(() => {
        this.reviewVotes--
      })
      Text(this.reviewVotes + \"TextChildChild\")
        .align(Alignment.Center)
        .fontSize(40)
        .fontWeight(FontWeight.Bold)
    }
  }
}

@Component
struct Child {
  @ObjectLink a: ClassA

  build() {
    Column() {
      Text(this.a.c + \"Child\")
        .align(Alignment.Center)
        .fontSize(40)
        .fontWeight(FontWeight.Bold)
      Button(\'count - costOfOneAttempt\')
        .margin(15)
        .onClick(() => {
          this.a.c--
        })
    }
  }
}

var nextID: number = 0

@Observed
class ClassA {
  public name: string
  public c: number
  public id: number

  constructor(c: number, name: string = \'OK\') {
    this.name = name
    this.c = c
    this.id = nextID++
  }
}

以上就是关于鸿蒙ArkTS装饰器@Prop、@Link、@Provide和@Consume详解相关的全部内容，希望对你有帮助。欢迎持续关注潘子夜个人博客（www.panziye.com），学习愉快哦！