HarmonyOS开发者社区

在鸿蒙ArkUI的组件树中，如果嵌套层级很深，使用@Prop逐层传递数据会造成严重的“属性钻取”问题，代码难以维护。@Provide和@Consume装饰器正是为解决这一问题而生。@Provide在祖先组件中定义并提供一个数据源，@Consume在后代组件的任何层级中直接消费该数据源，二者通过相同的key（默认使用变量名）自动建立连接。@Provide和@Consume支持双向同步，即后代组件修改@Consume变量时，变化会同步回祖先组件的@Provide变量。使用时需注意：@Provide可以设置别名（如@Provide('alias')）来避免变量名冲突；@Consume通过相同的别名进行匹配；支持allowOverride参数允许子孙组件覆盖同名的@Provide。从API version 18开始，@Provide/@Consume也支持在@ComponentV2中使用（作为状态管理V2的@Provider/@Consumer替代方案）。

// 祖先组件 - 提供数据
@Entry
@Component
struct GrandParent {
@Provide('themeColor') themeColor: string = '#007AFF';
@Provide userInfo: UserInfo = new UserInfo('张三', 25);

build() {
Column() {
Text('祖级组件').fontSize(20)
Parent()
}
}
}

@Component
struct Parent {
// 中间组件无需定义任何状态变量
build() {
Column() {
Text('父级组件（中间层，无需传递themeColor和userInfo）')
Child()
}
}
}

@Component
struct Child {
@Consume('themeColor') color: string; // 跨过Parent直接消费
@Consume userInfo: UserInfo; // 使用变量名作为key

build() {
Column({ space: 12 }) {
Text(子级组件).fontColor(this.color)
Text(用户名: ${this.userInfo.name})
Button('改变主题和用户名')
.onClick(() => {
this.color = '#FF3B30'; // 会同步回GrandParent
this.userInfo.name = '李四';
})
}
}
}