当前位置：首页 > news >正文

HarmonyOS学习实验九：@State和@Prop装饰器的使用方法

news 来源：原创 2025/6/12 10:15:12

HarmonyOS应用开发：父子组件状态管理实验报告

引言

在HarmonyOS应用开发领域，组件之间的状态管理是一个至关重要的概念。通过有效的状态管理，我们可以确保应用的数据流动清晰、可预测，从而提升应用的稳定性和可维护性。本次实验旨在探索HarmonyOS中父子组件之间的状态管理机制，特别是通过@State和@Prop装饰器实现状态传递的方法。

实验目的

本次实验的主要目的是在HarmonyOS应用中实现父子组件的状态管理，具体目标包括：

掌握@State装饰器的使用方法，用于在组件内部定义和管理状态。
理解@Prop装饰器的作用，实现父组件向子组件的状态传递。
验证单向数据流的状态管理机制，确保子组件不能直接修改父组件的状态。

实验环境与技术栈

开发软件：DevEco Studio（HarmonyOS官方推荐的集成开发环境）
操作系统：HarmonyOS（实验在HarmonyOS设备上运行）
API版本：API9（确保兼容性和最新特性支持）
编程语言与框架：ets（Extensible TypeScript），ArkUI框架（HarmonyOS的声明式UI开发框架）

实验步骤与代码实现

1. 创建父组件（ParentComponent.ets）

父组件是状态管理的核心，它负责定义和更新状态，并将状态传递给子组件。以下是父组件的关键代码实现：

// ParentComponent.ets
import {ChildComponent} from './ChildComponent';
@Entry
@Component
struct ParentComponent {// 父组件的状态变量，用于控制子组件的状态@State count: number = 0;build() {Column() {Text(`父组件计数: ${this.count}`).fontSize(20).margin({ top: 20 })// 增加计数按钮Button("增加计数").margin({ top: 10 }).onClick(() => {this.count++;})// 减少计数按钮Button("减少计数").margin({ top: 10 }).onClick(() => {this.count = Math.max(0, this.count - 1);})// 创建子组件，并将父组件的状态传递给子组件ChildComponent({ count: this.count })}.width("100%").height("100%")}
}

2. 创建子组件（ChildComponent.ets）

子组件负责接收并展示父组件传递的状态，但不能直接修改父组件的状态。以下是子组件的关键代码实现：

// ChildComponent.ets
export {ChildComponent}
@Entry
@Component
struct ChildComponent {// 使用@Prop装饰器接收父组件传递的状态@Prop count: number;build() {Column() {Text(`子组件接收到的计数: ${this.count}`).fontSize(18).margin({ top: 20 })// 子组件内部按钮，尝试修改父组件的状态（但不会生效，因为@Prop是单向绑定）Button("尝试修改父组件计数（无效）").margin({ top: 10 }).onClick(() => {this.count = 100; // 这里修改不会影响父组件})}.width("100%").height("100%")}
}