本文档详细介绍 ArkTS 中 @Prop 装饰器的定义、核心特性、使用场景及最佳实践，同时说明其词源背景，帮助开发者准确理解和使用该装饰器实现组件间的数据传递。
@Prop 是 ArkUI 框架提供的状态管理装饰器，用于实现父组件到子组件的**单向数据传递**，是组件化开发中实现状态分层管理的核心工具之一。通过 @Prop 装饰的变量可以接收父组件传递的数据，并在父组件数据更新时自动同步到子组件。
词源说明
Prop 源自英文单词 Property，意为“属性”，是前端组件化开发领域的通用术语，指代父组件传递给子组件的配置属性。这一命名规范在 React、Vue 等主流前端框架中均有沿用，已成为行业通用标准。
@Prop 严格遵循单向数据流设计原则：
• 数据仅能从父组件流向子组件，子组件对 @Prop 变量的修改不会回传给父组件
• 子组件内部的修改仅作用于当前组件及其后代组件，不会影响父组件的原始状态
• 当父组件的源数据发生变化时，子组件的 @Prop 变量会自动同步更新，覆盖子组件的本地修改
@Prop 支持多种数据类型的传递：
• 基本数据类型：number、string、boolean、undefined、null
• 复杂数据类型：Object、Array、Date 等引用类型
• 注意：传递引用类型时默认执行值拷贝，子组件修改对象属性不会影响父组件的原始对象
• 初始化阶段：子组件创建时，@Prop 变量会继承父组件传递的初始值
• 更新阶段：父组件的源数据发生变化时，子组件的 @Prop 变量会自动同步更新，触发子组件 UI 刷新
• 本地修改：子组件可以修改 @Prop 变量，但该修改仅在当前组件层级生效，不会向上传递
@Prop 适用于以下开发场景：
1. 展示型组件：子组件仅需展示父组件传递的数据，不需要修改源数据，如列表项、卡片组件、信息展示面板等
2. 复用型组件：需要在多个场景下复用的通用组件，通过 @Prop 接收不同的配置参数，提高组件的通用性
3. 状态分层管理：多层级组件嵌套场景下，将状态管理集中在父组件，子组件仅负责展示和局部交互，避免状态污染
4. 性能优化：通过单向数据流减少状态变更的影响范围，降低不必要的组件重渲染
以下示例展示了父组件向子组件传递数据的典型用法：
// 父组件
@Component
struct ParentComponent {
@State parentName: string = "ArkTS"
@State parentAge: number = 3
build() {
Column() {
Text(`父组件：${this.parentName}，版本 ${this.parentAge}`)
.fontSize(18)
.onClick(() => {
this.parentAge += 1 // 父组件修改状态，会同步到子组件的 @Prop 变量
})
// 向子组件传递数据
ChildComponent({
childName: this.parentName,
childAge: this.parentAge
})
}
.padding(20)
}
}
// 子组件
@Component
struct ChildComponent {
@Prop childName: string
@Prop childAge: number
build() {
Column() {
Text(`子组件：${this.childName}，版本 ${this.childAge}`)
.fontSize(16)
.margin({ top: 20 })
.onClick(() => {
this.childAge += 1 // 子组件修改仅作用于当前组件，不会影响父组件
})
}
}
}
注意事项
如果需要实现父子组件的双向数据同步，应使用 @Link 装饰器而非 @Prop。@Link 装饰的变量与父组件状态共享同一份内存地址，修改会双向同步。
• 优先使用 @Prop 实现单向数据传递，仅在确实需要双向同步时才使用 @Link，降低状态管理复杂度
• 对于不需要修改的纯展示参数，建议使用 @Prop 而非直接传递普通变量，享受自动更新能力
• 避免在 @Prop 变量上执行频繁的修改操作，如需大量本地修改，建议在子组件内部创建 @State 变量承接初始值
• 传递复杂对象时，如需子组件修改影响父组件，应配合 @Observed 和 @ObjectLink 装饰器使用
文档版本：V1.0 | 更新日期：2024年4月
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。