HarmonyOS ArkTS学习-状态管理-@Provide和@Consume

参考文献

官方文档

使用场景

@Provide用于装饰父组件中的变量。
@Consume用于装饰子组件中的变量。
两者配合使用达到父组件与子组件的双向同步。参考@State和@Link结合。但是@Provide和@Consume拜托了参数传递，实现了变量的跨层级（多层级）传递。

限制条件

@Provide和@Consume必须通过相同的变量名或者相同的变量别名绑定，变量类型必须相同。
注：@Provide和@Consume支持一个参数（变量别名），如@Provide(‘alias’)、@Consume(‘alias’)

代码示例

简单类型

//@Provide和@Consume双向同步

@Entry
@Component
struct ParentComponent{
  @Provide('str') str:string = 'hello world'
  build(){
    Row(){
      Column(){
        ComponentA()
        Button('change str')
          .onClick(()=>{
            this.str = 'changed'
          })
      }

    }
  }

}


@Component
struct ComponentA{
  @Consume('str') v1:string
  build(){
    Column(){
      Text(`v1: ${this.v1}`)
      ComponentB()
    }
  }
}

@Component
struct ComponentB{
  @Consume('str') v2:string
  build(){
    Column(){
      Text(`v2: ${this.v2}`)
      ComponentC()
    }
  }
}

@Component
struct ComponentC{
  @Consume('str') v3:string
  build(){
    Column(){
      Text(`v3: ${this.v3}`)
      Button('set v3')
        .onClick(()=>{
          this.v3 = 'v3'
        })
    }
  }
}

代码运行后点击set V3 和change str按钮均可以使上方的Text修改内容，且三个Text内容完全同步。

class对象

//@Provide和@Consume双向同步

@Entry
@Component
struct ParentComponent{
  @Provide('obj') str:NumberClass = new NumberClass(1)
  build(){
    Row(){
      Column(){
        ComponentA()
        Button('change number')
          .onClick(()=>{
            this.str = new NumberClass(100)
          })
      }

    }
  }

}
class NumberClass{
  public value:number;

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

@Component
struct ComponentA{
  @Consume('obj') v1:NumberClass
  build(){
    Column(){
      Text(`v1: ${this.v1.value}`)
      ComponentB()
    }
  }
}

@Component
struct ComponentB{
  @Consume('obj') v2:NumberClass
  build(){
    Column(){
      Text(`v2: ${this.v2.value}`)
      ComponentC()
    }
  }
}

@Component
struct ComponentC{
  @Consume('obj') v3:NumberClass
  build(){
    Column(){
      Text(`v3: ${this.v3.value}`)
      Button('set v3')
        .onClick(()=>{
          this.v3 = new NumberClass(1000)
        })
    }
  }
}

代码运行后点击set V3 和change number按钮均可以使上方的Text修改内容，且三个Text内容完全同步。