官方文档：创建自定义组件

[Q&A] 如何自定义组件？

１・struct + 自定义组件名 + {…}

struct MyComponent {
}

２・build()函数：

build()函数用于定义自定义组件的声明式UI描述，自定义组件必须定义build()函数。

struct MyComponent {
  build() {
  }
}

３・＠Component

struct被@Component装饰后具备组件化的能力。@Component装饰器仅能装饰struct关键字声明的数据结构。

@Component
struct MyComponent {
}

４・@Entry

@Entry装饰的自定义组件将作为UI页面的入口。

@Entry
@Component
struct MyComponent {
}

５・@Reusable

@Reusable装饰的自定义组件具备可复用能力

@Reusable
@Component
struct MyComponent {
}

自定义组件的参数

将父组件中的变量传递给子组件

将父组件中的函数传递给子组件

build()函数禁止操作出错时查官方文档即可

自定义组件通用样式

@Component
struct MyComponent {
  build() {
    Button(`Hello World`)
  }
}

@Entry
@Component
struct PracExample {
  build() {
    Row() {
      MyComponent()
        .width(200)
        .height(300)
        .backgroundColor(Color.Red)
    }
  }
}