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

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:stringbuild(){Column(){Text(this.message_S).textSty(40)//调用孙子组件：儿子的儿子ProviderC_Son_Son({message_S_S:$message_S})}}
}@Component
struct ProviderC_Son_Son{@Link message_S_S:stringbuild(){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:stringbuild(){Column(){Text(this.message_S).textSty(40)}}
}@Component
struct ProviderC_Son_Son{@Consume('Mes') message_S:string//也可以写成@Consume message:stringbuild(){Column(){Text(this.message_S).textSty(30).onClick(()=>{this.message_S= '我是孙子'})}}
}
//文本样式组件
@Extend(Text) function textSty(size:number){.fontSize(size).fontWeight(FontWeight.Bold)
}