**大家好，我是潘Sir，持续分享IT技术，帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容、欢迎关注！**
除去系统预置的组件外，ArkTS 还支持自定义组件。使用自定义组件，可使代码的结构更加清晰，并且能提高代码的复用性。
一、自定义组件语法
自定义组件的语法如下图所示
各部分语法说明如下：
- struct关键字
struct是ArkTS新增的用于自定义组件或者自定义弹窗的关键字。其声明的数据结构和TS中的类十分相似，可包含属性和方法。
- build方法
build()方法用于声明自定义组件的UI结构。
- 组件属性
组件属性可用作自定义组件的参数，使得自定义组件更为通用。
- @Compnent装饰器
@Component装饰器用于装饰struct关键字声明的数据结构。struct被@Component装饰后才具备组件化的能力。
注： 装饰器是Typescript中的一种特殊语法，常用于装饰类、方法、属性，用于修改或扩展其原有的行为。
在学完自定义组件的语法之后，我们会发现前文案例中的每个页面实际上都是一个自定义组件。但是和自定义组件的语法相比，前边的每个案例还会多出一个@Entry装饰器，那@Entry的作用又是啥呢？
在鸿蒙应用中，每个页面都是由一些列组件组合而成的，并且这些组件都是逐层嵌套的，因此这些组件最终形成了一个组件树的结构，如下图所示
我们前边所编写的每个页面就相当于是组件树的根节点，而@Entry装饰器的作用就是标识该组件为组件树的根节点，也就是一个页面的入口组件。
二、自定义组件案例
现在需要对前文的开/关灯的案例做出如下改造，由于两个按钮的结构十分相似，所以可考虑自定义一个按钮组件，然后进行复用。
自定义组件可以放在文件内，也可以单独成一个文件
文件内：
@Entry
@Component
// 自定义组件
struct CustomCom {
@State isOpen: boolean = false
build() {
Column({
space:50}) {
if (this.isOpen) {
Image('pages/imgs/light-on.png')
.height(300)
.width(300)
}else {
Image('pages/imgs/light-off.png')
.height(300)
.width(300)
}
Row({
space:50}){
CustomButton({
text:'Open',color:Color.Red}) //自定义组件传参
.onClick(()=>{
this.isOpen=false
})
Button('Open')
.onClick(()=>{
this.isOpen=true
})
}
}
.width('100%')
.width('100%')
.justifyContent(FlexAlign.Center)
}
}
@Component
struct CustomButton {
text:String ='Close' //接收参数
color:Color =Color.Blue
build() {
Button(this.text.toString())
.backgroundColor(this.color)
}
}
单独文件：
新建ArkTS文件，将自定义组件内容拷贝
@Component
export struct CustomButton {
text:String ='Close' //接收参数
color:Color =Color.Blue
build() {
Button(this.text.toString())
.backgroundColor(this.color)
}
}
在要使用的文件中引入：
import { CustomButton } from './CumtomButton'
光标置于报错处，alt+回车，选择导入类即可
《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！
