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

发布于 2022-4-11 17:15
浏览
1收藏

简单的变量传值: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,单个对象垮组件传值

OpenHarmony ETS  类状态 @Consume和@Provide 图文示例秒懂用法-开源基础软件社区

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会刷新,但内部对象属性改变不会引起刷新==

OpenHarmony ETS  类状态 @Consume和@Provide 图文示例秒懂用法-开源基础软件社区

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))
    }
  }
}


©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
标签
已于2022-4-11 17:18:21修改
4
收藏 1
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐