鸿蒙应用开发之父子组件传参：@Prop 装饰器使用教程
文章目录一、引言二、Prop 核心特性三、完整示例计数器应用3.1 子组件定义3.2 父组件定义四、运行效果说明五、关键要点与最佳实践六、总结这是一个使用鸿蒙技术开发的本地原生记账应用非常适合大家用来练手。相关源码已上传至 Github点击此处查看项目。欢迎大家交流、指正也欢迎提交 PR。一、引言在鸿蒙 ArkUI 框架中状态管理是构建动态交互界面的核心。Prop装饰器是实现父子组件间单向数据同步的关键工具。它允许父组件将状态值传递给子组件子组件可以读取并临时修改该值但修改不会影响父组件。当父组件的状态更新时会强制覆盖子组件的本地修改。本文将深入讲解Prop的工作原理、使用场景并通过完整示例帮助你快速掌握。二、Prop 核心特性Prop的设计遵循单向数据流原则其核心特性如下数据流向单向父 ➔ 子。父组件是唯一的数据源。类型支持string、number、boolean、enum、Date、Map、Set以及这些类型的数组或Object/class。本地修改子组件可修改Prop变量但修改仅限组件内部不会回传给父组件。父组件覆盖父组件状态变化时会强制覆盖子组件的本地修改确保数据一致性。三、完整示例计数器应用以下示例展示如何在鸿蒙中实现父组件向子组件单向传递数据并说明子组件内部修改Prop后会被父组件覆盖的特性。3.1 子组件定义Componentstruct ChildComponent{// 接收父组件传递的 count 值Propcount:number;build(){Column(){Text(子组件接收到的 count:${this.count}).fontSize(20).margin(10)Button(子组件本地 1不通知父组件).onClick((){// 修改 Prop 变量仅在本组件内生效this.count1;console.log(子组件内 count 改为${this.count});})}.padding(10).backgroundColor(#E0E0E0).borderRadius(10)}}3.2 父组件定义EntryComponentstruct ParentComponent{StateparentCount:number0;build(){Column(){Text(父组件 count:${this.parentCount}).fontSize(24).margin(10)Button(增加父组件 count).onClick((){this.parentCount1;})// 传递数据给子组件ChildComponent({count:this.parentCount}).margin({top:20})// 演示父组件覆盖子组件的本地修改Button(强制刷新父组件覆盖子组件本地修改).onClick((){this.parentCount;// 触发父组件状态更新})}.padding(20).width(100%).height(100%)}}运行效果四、运行效果说明初始状态父子组件的count均为 0。点击“子组件本地 1”子组件内部this.count变为 1页面显示 “子组件接收到的 count: 1”。父组件的parentCount仍为 0不受影响。点击“增加父组件 count”父组件State更新parentCount变为 1。子组件的Prop被父组件覆盖立即重新显示为 1即使子组件之前已修改为其他值。点击“强制刷新父组件”即使子组件本地修改过父组件状态更新后子组件显示的值会强制同步为父组件的最新值。五、关键要点与最佳实践单向性Prop是只读的从父组件角度看子组件不能通过修改Prop来更新父组件。数据同步父组件State变化时子组件Prop会立即更新且覆盖子组件的本地改动。修改范围子组件内部可以更改Prop变量但这种修改是临时的、局部的不会影响父组件或其他子组件。适用场景这种模式适合需要父组件控制数据源、子组件仅做展示或临时交互的场景例如表单的预览组件、配置项展示卡片等。六、总结Prop是鸿蒙应用开发中实现单向数据流的简洁方案。通过本文的示例你应该已经掌握了它的基本用法和核心特性。在实际开发中合理使用Prop可以帮你构建更清晰、可维护的组件树。当数据结构包含多层嵌套如对象中包含对象、数组等且需要监听深层属性的变化时使用 Observed ObjectLink 组合是最佳实践。
