HarmonyOS开发实战：小分享-状态管理进阶——@State/@Prop/@Link/@Provide/@Consume

前言

状态管理是 ArkUI 声明式 UI 范式的核心，除了@State和@Prop，还有@Link、@Provide、@Consume等高级装饰器。小分享 App 中使用了@State和@Prop实现组件通信。本篇讲解状态管理装饰器的完整体系。详细 API 可参考 HarmonyOS 状态管理官方文档。

一、状态管理装饰器体系

1.1 装饰器一览

二、@State 组件内状态

@Componentstruct TextEditPage{@StatetextContent:string='生活的美好在于分享';@StatefontSize:number=16;@StateselectedFilter:number=0;}

三、@Prop 父子单向传递

@Componentstruct BottomTabBar{@PropcurrentIndex:number=0;// 父组件传入@Proptitle:string='';}

四、@Link 父子双向同步

@Componentstruct ChildComponent{@Linkcount:number;// 双向同步，修改会反映到父组件build(){Button(`Count:${this.count}`).onClick(()=>{this.count++})// 修改会同步到父组件}}

五、@Provide 与 @Consume 跨层级

// 祖先组件@Componentstruct AppRoot{@Provide('theme')theme:string='light';build(){Column(){Text('App Root')ChildComponent()}}}// 后代组件@Componentstruct ChildComponent{@Consume('theme')theme:string;// 自动接收祖先的值build(){Text(`Theme:${this.theme}`)}}

六、@Observed 与 @ObjectLink

@ObservedclassUserInfo{name:string='';age:number=0;}@Componentstruct UserView{@ObjectLinkuser:UserInfo;build(){Text(`Name:${this.user.name}`).onClick(()=>{this.user.name='New Name'})}}

七、装饰器对比

八、本文核心知识点

8.1 状态管理核心要点

1. @State：组件内私有状态
2. @Prop：父→子单向传递
3. @Link：父子双向同步
4. @Provide/@Consume：跨层级数据共享

8.2 实战开发要点

• 简单传参用 @Prop
• 双向同步用 @Link
• 全局状态用 @Provide/@Consume
• 复杂对象用 @Observed/@ObjectLink

相关资源

• HarmonyOS 状态管理官方文档
• HarmonyOS @State 装饰器
• HarmonyOS @Prop 装饰器
• HarmonyOS @Link 装饰器
• HarmonyOS @Provide/@Consume
• 开源鸿蒙跨平台社区

附录：状态管理完整指南

1. 状态管理装饰器体系

2. @State 完整示例

@Componentstruct Counter{@Statecount:number=0build(){Column(){Text(`Count:${this.count}`).fontSize(24)Button('+1').onClick(()=>{this.count++})Button('-1').onClick(()=>{this.count--})}}}

3. @Prop 完整示例

@Componentstruct ChildComponent{@Propvalue:number=0build(){Text(`Value:${this.value}`).fontSize(20)}}

4. @Link 完整示例

@Componentstruct ChildComponent{@Linkcount:numberbuild(){Button(`Count:${this.count}`).onClick(()=>{this.count++})}}

5. @Provide/@Consume 完整示例

@Componentstruct AppRoot{@Provide('theme')theme:string='light'build(){Column(){ChildComponent()}}}@Componentstruct ChildComponent{@Consume('theme')theme:stringbuild(){Text(`Theme:${this.theme}`)}}

6. 选型建议

7. 完整代码文件索引

8. 总结

本文详细讲解了 HarmonyOS 状态管理装饰器的完整体系，涵盖 @State、@Prop、@Link、@Provide/@Consume 等核心装饰器。

相关资源

• HarmonyOS 状态管理官方文档：State Management
• HarmonyOS @State 装饰器：@State Guide
• HarmonyOS @Prop 装饰器：@Prop Guide
• HarmonyOS @Link 装饰器：@Link Guide
• HarmonyOS @Provide/@Consume：Provide/Consume
• HarmonyOS @Watch 装饰器：@Watch Guide
• HarmonyOS @Observed 装饰器：@Observed Guide
• 开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

• oh-package.json5 依赖管理

本文涉及的所有 API 索引

总结

本文详细讲解了小分享 App 中对应页面的完整实现。核心知识点涵盖布局容器、组件封装、状态管理、路由跳转等关键技术。通过本文的学习，读者可以掌握 HarmonyOS ArkUI 声明式开发的核心技能，并能够独立实现类似的页面功能。

相关资源

• HarmonyOS 官方文档：https://developer.huawei.com/consumer/cn/doc/
• ArkTS 语法指南：ArkTS Introduction
• 状态管理指南：State Management
• ArkUI 组件参考：ArkUI Components
• 路由 API：Router API
• 开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

10. 完整代码文件索引

11. 本文涉及的所有 API

12. 实现要点总结

状态管理核心要点：

1. @State：组件内私有状态，变化触发 UI 更新
2. @Prop：父→子单向数据传递
3. @Link：父子双向同步
4. @Provide/@Consume：跨层级数据共享
5. @Watch：监听状态变化触发副作用
6. @Observed/@ObjectLink：复杂对象深度监听

13. 选型建议

14. 总结

本文详细讲解了 HarmonyOS 状态管理装饰器的完整体系，涵盖 @State、@Prop、@Link、@Provide/@Consume、@Watch、@Observed/@ObjectLink 等核心装饰器，并给出了选型建议。

相关资源

• HarmonyOS 状态管理官方文档：State Management
• HarmonyOS @State 装饰器：@State Guide
• HarmonyOS @Prop 装饰器：@Prop Guide
• HarmonyOS @Link 装饰器：@Link Guide
• HarmonyOS @Provide/@Consume：Provide/Consume
• HarmonyOS @Watch 装饰器：@Watch Guide
• HarmonyOS @Observed 装饰器：@Observed Guide
• 开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

• oh-package.json5 依赖管理

• ArkUI 表单组件

• oh-package.json5 依赖管理

• ArkUI 表单组件

• ArkUI 表单组件

• oh-package.json5 依赖管理

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！