自定义组件具有以下特点：
- 可组合：允许开发者组合使用系统组件、及其属性和方法。
- 可重用：自定义组件可以被其他组件重用，并作为不同的实例在不同的父组件或容器中使用。
- 数据驱动UI更新：通过状态变量的改变，来驱动UI的刷新。
如果在另外的文件中引用该自定义组件，需要使用export关键字导出，并在使用的页面import该自定义组件。
步骤
1）创建组件
@Entry //@Entry装饰的自定义组件将作为UI页面的入口，可选。在单个UI页面中，最多可以使用@Entry装饰一个自定义组件
@Component
export struct HelloComp {
@State message: string = 'Hello, World!';
build() {
// HelloComponent自定义组件组合系统组件Row和Text
Row() {
Text(this.message)
.onClick(() => {
// 状态变量message的改变驱动UI刷新，UI从'Hello, World!'刷新为'Hello, ArkUI!'
this.message = 'Hello, ArkUI!';
})
}
}
}
2）引用组件
import { HelloComp } from '../component/HelloComp';
注意：
1、在 import 关键字后的大括号中,跟上要和自定义组件名称一致 ；
2、在 from 关键字 后面的字符串,是自定义组件代码的相对路径 ;
例如：
// 导入外部自定义子组件
import {HelloComp} from '../component/HelloComp';
@Entry
@Component
struct Example {
build() {
// 必须使用布局组件包括子组件
Column(){
// 自定义子组件
HelloComp();
}
}
}
