@Component注解的作用是用來構(gòu)建自定義組件

@Component組件官方文檔

自定義組件具有以下特點(diǎn)：

可組合：允許開發(fā)者組合使用系統(tǒng)組件、及其屬性和方法。
可重用：自定義組件可以被其他組件重用，并作為不同的實(shí)例在不同的父組件或容器中使用。
數(shù)據(jù)驅(qū)動(dòng)UI更新：通過狀態(tài)變量的改變，來驅(qū)動(dòng)UI的刷新。

以下示例展示了自定義組件的基本用法。

一 、創(chuàng)建組件ComponentA

關(guān)鍵定內(nèi)容：

1. @Component 聲明是組件
2. export 定義引用范圍，expor表示外部可以導(dǎo)入引用

@Entry
@Component
export struct ComponentA {@State msg: number = 1build() {Row() {//添加也給buttonButton(this.msg + "") {}.onClick(() => { //點(diǎn)擊事件this.msg = this.msg})}}
}

二 、其它ets組件導(dǎo)入引用

在index.ets中引用
關(guān)鍵定內(nèi)容：

import { ComponentA } from ‘./ComponentA’ //會(huì)自動(dòng)導(dǎo)入
ComponentA({ msg: 10 })

import { ComponentA } from './ComponentA'
@Entry
@Component
struct Index {@State message: string = '工欲善其事，必先利其器'@State message2: string = ''@State message3: string = '擁抱時(shí)代'@State message4: string = '點(diǎn)11擊事件'@State message5: number = 2build() {Row() {Column() {//引入組件ComponentAComponentA({ msg: 10 })Divider().padding(10)//引入組件ComponentAComponentA({ msg: 2 })}}}
}

結(jié)果預(yù)覽：