如何使用 @State、@Prop、@Link？

你是不是也在想——“鸿蒙这么火，我能不能学会？”
答案是：当然可以！
这个专栏专为零基础小白设计，不需要编程基础，也不需要懂原理、背术语。我们会用最通俗易懂的语言、最贴近生活的案例，手把手带你从安装开发工具开始，一步步学会开发自己的鸿蒙应用。
不管你是学生、上班族、打算转行，还是单纯对技术感兴趣，只要你愿意花一点时间，就能在这里搞懂鸿蒙开发，并做出属于自己的App！
📌 关注本专栏《零基础学鸿蒙开发》，一起变强！
每一节内容我都会持续更新，配图+代码+解释全都有，欢迎点个关注，不走丢，我是小白酷爱学习，我们一起上路 🚀

前言

在 HarmonyOS（鸿蒙操作系统）中，@State、@Prop 和 @Link 是用于 ArkTS（HarmonyOS 的 TypeScript 版本）中进行数据绑定和组件之间通信的装饰器。它们是 ArkUI 框架的一部分，帮助开发者更高效地管理组件的状态、属性和事件绑定。下面详细介绍如何使用这些装饰器。

1. @State 装饰器

@State 装饰器用于 组件内部状态管理。通过 @State，开发者可以声明组件内部的状态数据，这些数据的变化会自动更新视图。当组件的状态发生变化时，UI 会重新渲染，以反映最新的数据。

1.1 作用

• 管理组件内部的状态：@State 用于声明和管理组件的本地状态。
• 自动更新 UI：当状态发生变化时，相关的 UI 会自动更新。

1.2 使用示例

import { State } from '@ohos/application';
import { VText, VButton } from '@ohos.ui.components';

export default class CounterComponent {
  @State message = 'Click the button to increase count!';
  @State count = 0;

  increment() {
    this.count += 1;
    this.message = `Count: ${this.count}`;
  }

  build() {
    return (
      <div>
        <VText>{this.message}</VText>
        <VButton onClick={this.increment}>Increase</VButton>
      </div>
    );
  }
}

在这个示例中：

• @State 用来声明组件的 message 和 count 状态。
• 当点击按钮时，count 增加，message 自动更新，UI 会重新渲染。

2. @Prop 装饰器

@Prop 装饰器用于 接收父组件的传递的属性。它允许父组件向子组件传递数据，子组件通过 @Prop 装饰器接收这些数据。@Prop 通常用于定义子组件的外部输入（即组件的输入属性）。

2.1 作用

• 接收父组件的数据：@Prop 用于接收传递给子组件的属性数据。
• 单向数据流：@Prop 支持从父组件向子组件传递数据，保持单向数据流。

2.2 使用示例

import { Prop } from '@ohos/application';
import { VText } from '@ohos.ui.components';

export default class ChildComponent {
  @Prop message: string = '';

  build() {
    return (
      <div>
        <VText>{this.message}</VText>
      </div>
    );
  }
}

在父组件中使用该子组件：

import ChildComponent from './ChildComponent.vue';

export default class ParentComponent {
  data() {
    return {
      parentMessage: 'Hello from Parent Component!',
    };
  }

  build() {
    return (
      <div>
        <ChildComponent message={this.parentMessage} />
      </div>
    );
  }
}

在这个例子中，父组件通过 message={this.parentMessage} 向子组件 ChildComponent 传递数据，子组件通过 @Prop 装饰器接收这个值并显示。

3. @Link 装饰器

@Link 装饰器用于 创建双向绑定，它在子组件和父组件之间实现双向数据绑定。与 @Prop 的单向数据传递不同，@Link 使得子组件可以直接修改父组件的数据，并同步更新。

3.1 作用

• 双向数据绑定：@Link 允许在子组件和父组件之间实现双向数据绑定。
• 父子组件同步：通过 @Link，当子组件修改了父组件的传递数据时，父组件的数据也会同步更新。

3.2 使用示例

import { Link } from '@ohos/application';
import { VInput, VText } from '@ohos.ui.components';

export default class ChildComponent {
  @Link message: string = '';

  build() {
    return (
      <div>
        <VInput value={this.message} onInput={(e) => { this.message = e.target.value; }} />
        <VText>{this.message}</VText>
      </div>
    );
  }
}

在父组件中使用该子组件：

import ChildComponent from './ChildComponent.vue';

export default class ParentComponent {
  data() {
    return {
      parentMessage: 'Hello from Parent!',
    };
  }

  build() {
    return (
      <div>
        <ChildComponent link:message={this.parentMessage} />
      </div>
    );
  }
}

在这个例子中：

• 父组件通过 link:message={this.parentMessage} 向子组件传递数据，并建立了双向绑定。
• 子组件通过 @Link 接收这个 message 属性，并在 VInput 输入框中显示该值，输入框内容变化时，父组件的数据会同步更新。

4. @State、@Prop 和 @Link 的对比

5. 总结

• @State：用于管理组件的内部状态，并确保当状态变化时，UI 会自动更新。
• @Prop：用于接收父组件传递的单向数据，适用于从父到子的单向数据流。
• @Link：用于实现父子组件之间的双向数据绑定，子组件可以修改父组件的属性值，父组件的数据会同步更新。

这些装饰器是 ArkTS 语言和 ArkUI 框架的重要组成部分，它们帮助开发者高效地进行组件间的通信、数据管理和状态更新，使得应用的开发更加简洁和易于维护。

❤️ 如果本文帮到了你…

• 请点个赞，让我知道你还在坚持阅读技术长文！
• 请收藏本文，因为你以后一定还会用上！
• 如果你在学习过程中遇到bug，请留言，我帮你踩坑！