OpenHarmony ETS 类状态 @Consume和@Provide 图文示例秒懂用法 原创 精华

简单的变量传值：OpenHarmony ETS 状态变量(@State，@Prop，@Link) 图文秒懂用法-OpenHarmony技术社区-51CTO.COM

若我们多组件之间要传值，一层层传递下去有点麻烦；我们可以用@Consume和@Provide进行跨组件传值

@Provide

• ==@Provide类似@State状态变量，如果@Provide装饰的变量或@Consume装饰的变量发生变化，会重新渲染页面==
• 支持类型
  • 基础类型 boolean，string，number
  • observed class，修改其中的属性
  • Array：添加，删除，更新数组中的元素
• Provide作为数据的提供方，可以更新其子孙节点的数据，并触发页面渲染

@Consume

• Consume在感知到Provide数据的更新后，会触发当前view的重新渲染

1，单个对象垮组件传值

class Data {
  playNum: number //播放量

  constructor(playNum: number) {
    this.playNum = playNum
  }
}

Entry部分

 @Provide("provide_data") data: Data = new Data(11)

子组件部分

@Consume("provide_data") data: Data;

2，数组传值

类似上去

==注意：列表新增UI会刷新，但内部对象属性改变不会引起刷新==

3，完整代码

class Data {
  playNum: number //播放量

  constructor(playNum: number) {
    this.playNum = playNum
  }
}

@Entry
@Component
struct CompA {
  @Provide("provide_data") data: Data = new Data(11)
  @Provide("provide_list") dataList: Data[] = [
    { playNum: 0, },
    { playNum: 1, },
    { playNum: 2, },
    { playNum: 3, }
  ]

  aboutToAppear() {
  }

  build() {
    Column() {
      Text('简单数据类型').fontSize(24).fontColor('#FF0000')

      Text('利用@Consume和@Provide').fontSize(24).fontColor('#FF0000')

      Text('跨组件传值').fontSize(24)

      Text('单个对象内部改变').fontSize(24).margin({ top: 20 })

      Row() {
        Column() {
          Button(`Entry:${this.data.playNum}`).fontSize(22)
            .onClick(() => {
              this.data.playNum += 1
            })
        }
      }

      Com2()

      Text('列表改变').fontSize(24).margin({ top: 20 })


      Text('列表新增UI会刷新，但内部对象属性改变不会引起刷新').fontSize(24).margin({ top: 20 }).fontColor('#FF0000')

      Row() {

        Column() {
          Button(`Entry:减少一个`).fontSize(12)
            .onClick(() => {
              this.dataList.pop()
            })

          ForEach(this.dataList, (item: Data) => {
            Button(`Entry:${item.playNum}`).fontSize(12)
              .onClick(() => {
                item.playNum += 1
              })
          }, item => JSON.stringify(item))
        }

        ComList2()
      }

    }
    .width('100%').margin({ top: 20 })
  }
}

@Component
export struct Com2 {
  @Consume("provide_data") data: Data;

  build() {
    Column() {
      Row() {
        Button(`子组件2:${this.data.playNum}`).fontSize(20)
          .onClick(() => {
            this.data.playNum += 1;
          })

        Com3()
      }
    }
  }
}

@Component
export struct ComList2 {
  @Consume("provide_list") dataList: Data[]

  build() {

    Row() {
      Column() {
        Button(`ComList2:新增一个`).fontSize(12)
          .onClick(() => {
            this.dataList.push( { playNum: 0, })
          })

        ForEach(this.dataList, (item: Data) => {
          Button(`ComList2:${item.playNum}`).fontSize(12)
            .onClick(() => {
              item.playNum += 1
            })
        }, item => JSON.stringify(item))
      }

      ComList3()
    }
  }
}

@Component
export struct Com3 {
  @Consume("provide_data") data: Data;

  build() {
    Column() {
      Row() {
        Button(`子子组件3:${this.data.playNum}`).fontSize(20)
          .onClick(() => {
            this.data.playNum += 1;
          })
      }
    }
  }
}

@Component
export struct ComList3 {
  @Consume("provide_list") dataList: Data[]

  build() {
    Column() {
      Button(`ComList3:新增一个`).fontSize(12)
        .onClick(() => {
           this.dataList.push( { playNum: 0, })
        })

      ForEach(this.dataList, (item: Data) => {
        Button(`ComList3:${item.playNum}`).fontSize(12)
          .onClick(() => {
            item.playNum += 1
          })
      }, item => JSON.stringify(item))
    }
  }
}