**大家好，我是潘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 = falsebuild() {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.Bluebuild() {Button(this.text.toString()).backgroundColor(this.color)}
}
单独文件：
新建ArkTS文件，将自定义组件内容拷贝
@Component
export struct CustomButton {text:String ='Close' //接收参数color:Color =Color.Bluebuild() {Button(this.text.toString()).backgroundColor(this.color)}
}
在要使用的文件中引入：
import { CustomButton } from './CumtomButton'
光标置于报错处，alt+回车，选择导入类即可
《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！
