【Harmony OS 4.0】自定义组件 —— @Component 装饰器

@Component 装饰器用于装饰 struct 关键字声明的数据结构。struct 被 @Component 装饰后才具有组件化的能力。
1.2 具有以下特点：
1.2.1 可组合：允许开发者组合使用多个系统组件，及其属性和方法，实现UI的复用。
1.2.2 可重用：可以被其他组件重用，并作为不同的实例在不同的父组件或容器中使用。
1.2.3 数据驱动UI更新，通过状态变量的改变，来驱动UI的刷新。

struct 关键字，是 ArkTs 新增的用于自定义组件、自定义弹窗的关键字。

build() 方法，用于声明自定义组件的UI结构体。

给自定义组件传参，必须传一个对象。

1. 自定义组件语法(通用模版)

ts 复制代码

// comp 回车自动生成自定义组件模版
@Component
struct 自定义组件名 {
	build() {}
}

2. 在同一个文件定义并使用自定义组件

ts 复制代码

// 自定义组件
@Component
struct MyHelloComponent {
  @State username: string = '🧚‍'
  build(){
    Column() {
      Text(`hello ${this.username}`)
        .fontSize(16)
        .fontColor(Color.Grey)
        .height(15)
        .onClick(() => {
          this.username = '七喜'
        })
    }
  }
}

@Entry
@Component
struct UITest3 {
  build() {
    Column({space: 10}) {
      Text('主界面')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .fontColor(Color.Black)
      MyHelloComponent({username: 'world'}) // 引用自定义组件
      Divider()
      MyHelloComponent({username: 'SZ'}) // 引用自定义组件
    }
  }
}

3. 不在同一个文件使用 export 、import 导出导入自定义组件

ts 复制代码

// 自定义组件
@Component
export struct MyHelloComponent {
  @State username: string = '🧚‍'
  build(){
    Column() {
      Text(`hello ${this.username}`)
        .fontSize(16)
        .fontColor(Color.Grey)
        .height(15)
        .onClick(() => {
          this.username = '七喜'
        })
    }
  }
}

import { MyHelloComponent } from './MyHelloComponent'

@Entry
@Component
struct UITest3 {
  build() {
    Column({space: 10}) {
      Text('主界面')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .fontColor(Color.Black)
      MyHelloComponent({username: 'world'}) // 引用自定义组件
      Divider()
      MyHelloComponent({username: 'SZ'}) // 引用自定义组件
    }
  }
}