鸿蒙4.0开发笔记之ArkTS装饰器语法基础之发布者订阅者模式@Provide和@Consume（十三）

news2024/9/28 19:18:52

1、定义

在鸿蒙系统的官方语言ArkTS中，有一套类似于发布者和订阅的模式，使用@Provide、@Consume两个装饰器来实现。

@Provide、@Consume：@Provide/@Consume装饰的变量用于跨组件层级（多层组件）同步状态变量，可以不需要通过参数命名机制传递，通过alias（别名）或者属性名绑定。

2、逐级传递的困境

从父—>子—>孙三级传递，甚至以后复杂的项目需要几十级的传递，都需要通过一个多余被Link修饰的变量进行传递，太过复杂。如下面的案例：

@Entry
@Component
struct ProviderC {
  @State message: string = '沧海'
  build() {
    Row() {
      Column() {
        Text(this.message).textSty(50)
          .onClick(()=>{
            //点击文字，在‘沧海’和‘扁舟’之间进行切换
            this.message= this.message==='沧海' ? '扁舟' : '沧海'
          })
        //调用子组件
        ProviderC_Son({ message_S:$message })
      }
      .width('100%')
    }
    .height('100%')
  }
}

@Component
struct ProviderC_Son{
  @Link message_S:string
  build(){
    Column(){
      Text(this.message_S).textSty(40)
      //调用孙子组件：儿子的儿子
      ProviderC_Son_Son({message_S_S:$message_S})
    }
  }
}

@Component
struct ProviderC_Son_Son{
  @Link message_S_S:string
  build(){
    Column(){
      Text(this.message_S_S).textSty(30)
            .onClick(()=>{
              this.message= '我是孙子'
            })
    }
  }
}
//文本样式组件
@Extend(Text) function textSty(size:number){
    .fontSize(size)
    .fontWeight(FontWeight.Bold)
}

3、发布者订阅者模式

通过发布者Provide和订阅者Consume改良后：可以直接从父传递到孙子，不需要经过中间变量的传递。实现的效果与逐级Link一样，都可以实现多个组件之间的同时联动。如下改良后的案例：

@Entry
@Component
struct ProviderC {
  @Provide('Mes') message: string = '沧海'
  //也可以写成@Provide message: string = '沧海'
  build() {
    Row() {
      Column() {
        Text(this.message).textSty(50)
          .onClick(()=>{
            //点击文字，在‘沧海’和‘扁舟’之间进行切换
            this.message= this.message==='沧海' ? '扁舟' : '沧海'
          })
        //调用子组件时就不再需要传递参数
        ProviderC_Son_Son()
      }
      .width('100%')
    }
    .height('100%')
  }
}

@Component
struct ProviderC_Son{
  @Link message_S:string
  build(){
    Column(){
      Text(this.message_S).textSty(40)
    }
  }
}

@Component
struct ProviderC_Son_Son{
  @Consume('Mes') message_S:string
  //也可以写成@Consume message:string
  build(){
    Column(){
      Text(this.message_S).textSty(30)
        .onClick(()=>{
          this.message_S= '我是孙子'
        })
    }
  }
}
//文本样式组件
@Extend(Text) function textSty(size:number){
  .fontSize(size)
  .fontWeight(FontWeight.Bold)
}