HarmonyOS Next 5.0 @ 属性有哪些

在鸿蒙 Next 5.0 中，@ 属性（装饰器）用于为类或类成员提供元数据或特殊行为。以下是一些常见的 @ 属性及其用途：

1. @Entry

• 用途：标记一个组件为应用的入口组件。

• 示例：

  TypeScript复制

  @Entry
  @Component
  struct Index {
      build() {
          return <Text>Hello, HarmonyOS Next!</Text>;
      }
  }
  

• 说明：每个应用必须有一个 @Entry 标记的组件。

2. @Component

• 用途：标记一个类为组件，使其可以在 ArkUI 中使用。

• 示例：

  TypeScript复制

  @Component
  struct MyComponent {
      build() {
          return <Text>My Component</Text>;
      }
  }
  

• 说明：用于定义可复用的组件。

3. @State

• 用途：标记一个类成员为组件的状态变量，用于响应式更新界面。

• 示例：

  TypeScript复制

  @Component
  struct MyComponent {
      @State count: number = 0;
  
      build() {
          return (
              <Column>
                  <Text>{`Count: ${this.count}`}</Text>
                  <Button onClick={() => this.count++}>Increment</Button>
              </Column>
          );
      }
  }
  

• 说明：状态变量会在值发生变化时触发界面重新渲染。

4. @Prop

• 用途：标记一个类成员为组件的属性，用于从父组件传递数据。

• 示例：

  TypeScript复制

  @Component
  struct ChildComponent {
      @Prop title: string;
  
      build() {
          return <Text>{this.title}</Text>;
      }
  }
  
  @Component
  struct ParentComponent {
      build() {
          return <ChildComponent title="Hello from Parent" />;
      }
  }
  

• 说明：@Prop 用于父子组件之间的单向数据流。

5. @Provide 和 @Consume

• 用途：用于跨组件层级传递数据，类似于 Vue.js 中的 provide 和 inject。

• 示例：

  TypeScript复制

  @Component
  struct ParentComponent {
      @Provide data: string = "Shared Data";
  
      build() {
          return <ChildComponent />;
      }
  }
  
  @Component
  struct ChildComponent {
      @Consume data: string;
  
      build() {
          return <Text>{this.data}</Text>;
      }
  }
  

• 说明：@Provide 在父组件中提供数据，@Consume 在子组件中消费数据。

6. @BuilderParam

• 用途：用于标记 CustomDialogController 的 builder 方法中的参数。

• 示例：

  TypeScript复制

  @Component
  struct MyDialog {
      @BuilderParam closeDialog: () => void;
  
      build() {
          return <Button onClick={this.closeDialog}>Close</Button>;
      }
  }
  

• 说明：@BuilderParam 用于在 CustomDialogController 的 builder 方法中传递参数。

7. @Watch

• 用途：用于监听状态变量的变化，并执行特定逻辑。

• 示例：

  TypeScript复制

  @Component
  struct MyComponent {
      @State count: number = 0;
  
      @Watch('count')
      onCountChanged(newCount: number, oldCount: number) {
          console.log(`Count changed from ${oldCount} to ${newCount}`);
      }
  
      build() {
          return (
              <Column>
                  <Text>{`Count: ${this.count}`}</Text>
                  <Button onClick={() => this.count++}>Increment</Button>
              </Column>
          );
      }
  }
  

• 说明：@Watch 用于监听状态变量的变化。

8. @Lifecycle

• 用途：用于定义组件的生命周期钩子。

• 示例：

  TypeScript复制

  @Component
  struct MyComponent {
      aboutToAppear() {
          console.log("Component is about to appear");
      }
  
      build() {
          return <Text>Hello, World!</Text>;
      }
  }
  

• 说明：生命周期钩子包括 aboutToAppear、aboutToDisappear 等。

这些 @ 属性是鸿蒙 Next 5.0 中用于增强组件功能和管理数据流的重要工具。通过合理使用这些属性，可以实现更灵活和高效的组件开发。