在ArkUI中，UI显示的内容均为组件，由框架直接提供的称为系统组件，由开发者定义的称为自定义组件。
我们每次新建页面时，也是在创建自定义组件。但项目中除了页面类的组件外，还可以创建非页面类的自定义组件。
一、创建自定义组件
1、组件目录
如果是非页面类的自定义组件，通常我们会在 pages 同级目录中，再创建一个 components 目录：
说明：components 目录名并不是必须的，可以根据自己的习惯设置其他的名称。
2、新建组件
在组件目录 components 中右键选择“New > ArkTS File”，然后输入组件名（组件名首字母大写）：
3、组件基础代码
自定义组件的基础代码如下，用@Component 装饰器装饰 struct：
@Component
struct MyComponent {
build() {
}
}
ArkTS 中提供了快捷输入方式，输入comp后回车即可快速生成自定义组件的基础代码结构，步骤参考下图：
4、暴露自定义组件
在外部文件中创建的自定义组件，需要通过 export 或 export default 暴露出去（建议使用 export），才能在其他文件中引入使用。
@Component
export struct MyComponent {
build() {
}
}
二、引入渲染自定义组件
在页面或其他组件中需要使用外部自定义组件时，需要先通过 import from 引入外部组件，然后再调用渲染组件。
示例代码：
import { MyComponent } from '../components/MyComponent'
@Entry
@Component
struct MyPage {
build() {
Column() {
MyComponent()
}
}
}
说明：我们可以直接在需要渲染自定义组件的位置，直接调用组件名，DevEco Studio会自动帮我们在文件顶部生成引入代码。
