当前位置：首页 > news >正文

鸿蒙HarmonyOS状态管理装饰器详解

news 2025/8/28 7:05:39

装饰器概述

装饰器	说明	使用场景
@Prop	单向同步	父子组件间单向数据传递
@Link	双向同步	父子组件间双向数据同步
@Provide/@Consume	跨层级数据同步	祖先和后代组件间数据同步
@Observed	类装饰器	使类具备响应式能力
@ObjectLink	对象属性同步	与@Observed配合实现对象属性同步

完整示例演示

import { BusinessError } from '@ohos.base';// 定义一个被@Observed装饰的类
@Observed
class User {name: string;age: number;constructor(name: string, age: number) {this.name = name;this.age = age;}
}@Entry
@Component
struct MainPage {@State message: string = 'Hello HarmonyOS';@State count: number = 0;@State isActive: boolean = true;@State user: User = new User('张三', 25);@Provide totalScore: number = 100;build() {Column({ space: 20 }) {Text(this.message).fontSize(30).fontWeight(FontWeight.Bold)Divider()// 显示当前计数Text(`计数: ${this.count}`).fontSize(20)// 显示用户信息Text(`用户: ${this.user.name}, 年龄: ${this.user.age}`).fontSize(20)// 显示总分Text(`总分: ${this.totalScore}`).fontSize(20).margin({ top: 10 })Divider()// 使用@Prop的子组件PropChildComponent({ propMessage: this.message }).margin({ top: 10 })// 使用@Link的子组件LinkChildComponent({ linkCount: $count }).margin({ top: 10 })// 使用@ObjectLink的子组件ObjectLinkChildComponent({ objectLinkUser: this.user }).margin({ top: 10 })// 使用@Consume的子组件ConsumeChildComponent().margin({ top: 10 })Button('父组件修改数据').width('80%').onClick(() => {this.count++;this.user.age++;this.totalScore += 10;this.message = `父组件修改于 ${new Date().toLocaleTimeString()}`;})}.width('100%').height('100%').padding(20)}
}// 使用@Prop的子组件
@Component
struct PropChildComponent {@Prop propMessage: string;build() {Column() {Text('@Prop子组件').fontSize(18).fontColor(Color.Blue)Text(this.propMessage).fontSize(16).margin({ top: 5 })Button('修改@Prop数据(不会同步回父组件)').width('90%').margin({ top: 10 }).onClick(() => {this.propMessage = `子组件修改于 ${new Date().toLocaleTimeString()}`;})}.width('100%').padding(10).backgroundColor(Color.White).borderRadius(10)}
}// 使用@Link的子组件
@Component
struct LinkChildComponent {@Link linkCount: number;build() {Column() {Text('@Link子组件').fontSize(18).fontColor(Color.Green)Text(`计数: ${this.linkCount}`).fontSize(16).margin({ top: 5 })Button('增加计数(会同步回父组件)').width('90%').margin({ top: 10 }).onClick(() => {this.linkCount++;})}.width('100%').padding(10).backgroundColor(Color.White).borderRadius(10)}
}// 使用@ObjectLink的子组件
@Component
struct ObjectLinkChildComponent {@ObjectLink objectLinkUser: User;build() {Column() {Text('@ObjectLink子组件').fontSize(18).fontColor(Color.Orange)Text(`用户: ${this.objectLinkUser.name}, 年龄: ${this.objectLinkUser.age}`).fontSize(16).margin({ top: 5 })Button('增加年龄(会同步回父组件)').width('90%').margin({ top: 10 }).onClick(() => {this.objectLinkUser.age++;})}.width('100%').padding(10).backgroundColor(Color.White).borderRadius(10)}
}// 使用@Consume的子组件
@Component
struct ConsumeChildComponent {@Consume totalScore: number;build() {Column() {Text('@Consume子组件').fontSize(18).fontColor(Color.Red)Text(`总分: ${this.totalScore}`).fontSize(16).margin({ top: 5 })Button('减少分数(会同步到所有@Provide)').width('90%').margin({ top: 10 }).onClick(() => {this.totalScore -= 5;})}.width('100%').padding(10).backgroundColor(Color.White).borderRadius(10)}
}