HarmonyOS 鸿蒙Next中使用@State/@Prop实现父子组件状态传递

如何使用@State/@Prop实现父子组件状态传递？

在ArkUI开发中，父子组件间的状态传递是构建复杂应用的基础。[@State](/user/State)和[@Prop](/user/Prop)装饰器是实现这一功能的核心工具，它们分别用于管理组件内部状态和接收父组件传递的状态。

1. @State装饰器

[@State](/user/State)装饰的变量是组件内部的状态数据，当状态改变时，会触发所在组件的UI刷新。

基本用法：

[@State](/user/State) count: number = 0

特点：

• 支持多种类型：number、string、boolean、class、Array等
• 状态变化会自动更新UI
• 只能在当前组件内部修改

2. @Prop装饰器

[@Prop](/user/Prop)装饰的变量用于接收父组件传递的状态，建立单向数据绑定。

基本用法：

[@Prop](/user/Prop) count: number

特点：

• 支持与父组件@State、@Link、@Prop等建立单向绑定
• 子组件可以修改@Prop变量，但不会同步回父组件
• 父组件状态变化会自动更新子组件的@Prop变量

3. 父子组件状态传递示例

父组件（ParentComponent）

@Component
struct ParentComponent {
    [@State](/user/State) parentCount: number = 0
    
    build() {
        Column() {
            Text(`父组件计数: ${this.parentCount}`)
                .fontSize(20)
            
            Button('增加计数')
                .onClick(() => {
                    this.parentCount++
                })
            
            // 传递状态给子组件
            ChildComponent({ childCount: this.parentCount })
        }
    }
}

子组件（ChildComponent）

@Component
struct ChildComponent {
    [@Prop](/user/Prop) childCount: number
    
    build() {
        Column() {
            Text(`子组件接收的计数: ${this.childCount}`)
                .fontSize(18)
                .margin(10)
            
            Button('子组件修改')
                .onClick(() => {
                    // 这里修改不会影响父组件的parentCount
                    this.childCount += 10
                })
        }
    }
}

4. 使用场景对比

5. 最佳实践

1. 状态提升：将共享状态提升到最近的共同父组件
2. 单一数据源：避免多个组件修改同一状态
3. 合理拆分：根据业务逻辑合理使用@State和@Prop
4. 性能优化：避免不必要的状态传递和UI刷新

6. 常见问题

Q: @Prop修改后为什么父组件状态不变？ A: @Prop建立的是单向数据绑定，子组件的修改不会同步回父组件。如果需要双向绑定，应使用@Link装饰器。

Q: 什么时候使用@State，什么时候使用@Prop？ A: 如果状态只在当前组件使用，用@State；如果需要从父组件接收状态，用@Prop。

Q: 可以传递复杂对象吗？ A: 可以，@State和@Prop支持class、Array等复杂类型。

通过合理使用@State和@Prop，可以构建出清晰、可维护的组件状态管理架构，提高ArkUI应用的开发效率和质量。