HarmonyOS鸿蒙Next中如何区别@State与@Prop的应用场景？？？

HarmonyOS鸿蒙Next中如何区别@State与@Prop的应用场景？？？ 子组件使用[@Prop](/user/Prop)接收父组件数据时，修改子组件状态为何未同步父组件？

4 回复

@Prop装饰的变量是和父组件建立单向同步关系，装饰的变量是可变的，但修改不会同步回父组件。

cke_1274.png

@Link装饰的变量可以和父组件建立双向同步关系，子组件中@Link装饰变量的修改会同步给父组件中建立双向数据绑定的数据源，父组件的更新也会同步给@Link装饰的变量。

cke_1794.png

更多关于HarmonyOS鸿蒙Next中如何区别@State与@Prop的应用场景？？？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在aoi中@Prop是单向绑定（子组件修改不反馈父组件），@Link才是双向绑定。

示例代码：

/**
 * @author J.query
 * @date 2025/12/22 22:07
 * @email j-query@foxmail.com
 * Description:
 */

@Component
struct ChildComp {
  @Prop count: number; // 单向绑定

  build() {
    Text(`子组件: ${this.count}`)
      .onClick(() => {
        // 修改仅影响子组件自身
        this.count += 1;
      })
  }
}

@Entry
@Component
struct ParentComp {
  @State parentCount: number = 0;

  build() {
    Column() {
      ChildComp({ count: this.parentCount }) // 父→子单向传递
      Text(`父组件: ${this.parentCount}`)
        .onClick(() => {
          this.parentCount += 1; // 父组件修改影响子组件
        })
    }
  }
}

原理：@Prop基于值拷贝，@Link基于引用传递，需根据场景选择。

cke_1601.png

@State与@Prop对比

概述

  • @State：用于组件内部私有状态管理，数据变化触发UI更新。
  • @Prop：用于父子组件单向数据传递，父组件修改会同步到子组件，子组件修改不影响父组件。

应用场景

  • @State：组件自身状态（如按钮是否禁用）
  • @Prop：接收父组件配置参数（如标题文本）

关键区别

  1. 数据所有权：@State属组件私有，@Prop数据来自父组件
  2. 更新范围：@State更新当前组件，@Prop更新父子绑定的组件
  3. 修改权限：@Prop在子组件中修改不会反向传递

@State 和 @Prop 的核心区别在于数据所有权和同步方向，这直接决定了它们的应用场景。

@State：

  • 数据所有权： 属于当前组件（拥有该状态的组件）。组件自己创建并管理这个状态数据。
  • 同步方向： 单向向下，从拥有者组件同步到其子组件（通过@Prop或@Link等接收）。
  • 应用场景： 用于声明组件内部的私有状态。这个状态的变化驱动当前组件及其子组件的UI更新。它是组件内部数据流的“源头”。
  • 示例： 一个计数器组件内部管理计数值的变量，一个自定义开关组件内部管理开关状态的变量。

@Prop：

  • 数据所有权： 不属于当前组件。数据来源于父组件（通常是父组件的@State、@Link或常规变量）。
  • 同步方向： 单向从父组件流向子组件。子组件可以修改接收到的@Prop变量的值，但这个修改仅存在于子组件内部，不会回传给父组件。
  • 应用场景： 用于声明需要从父组件初始化，并且允许在子组件内部修改，但修改不需要同步回父组件的状态。它实现了子组件对父组件数据的“单向副本”或“本地修改”。
  • 示例： 父组件传递一个初始的文本内容给子组件进行编辑，但子组件的编辑操作是临时的，只有确认后才通过事件通知父组件更新源数据。

针对您的问题：“子组件使用@Prop接收父组件数据时，修改子组件状态为何未同步父组件？”

这正是@Prop的设计行为。@Prop装饰的变量是父组件状态的一个单向同步副本。子组件可以读取和修改这个副本，但任何修改都只作用于子组件自身的这个副本，不会逆向影响父组件中的源数据（@State变量）。这种设计适用于您希望子组件能基于初始值进行独立操作，而不立即污染父组件状态的场景。

如果需要修改同步回父组件，应使用 @Link 装饰器。@Link建立双向同步，子组件对@Link变量的修改会直接更新父组件中对应的源数据（必须是@State, @Link, @Prop, @Provide, @Consume等装饰的变量）。

回到顶部