vs做網(wǎng)站開發(fā)嗎關鍵洞察力
@Component注解的作用是用來構建自定義組件
@Component組件官方文檔
自定義組件具有以下特點:
可組合:允許開發(fā)者組合使用系統(tǒng)組件、及其屬性和方法。
可重用:自定義組件可以被其他組件重用,并作為不同的實例在不同的父組件或容器中使用。
數(shù)據(jù)驅動UI更新:通過狀態(tài)變量的改變,來驅動UI的刷新。
以下示例展示了自定義組件的基本用法。
一 、創(chuàng)建組件ComponentA
關鍵定內容:
1. @Component 聲明是組件
2. export 定義引用范圍,expor表示外部可以導入引用
@Entry
@Component
export struct ComponentA {@State msg: number = 1build() {Row() {//添加也給buttonButton(this.msg + "") {}.onClick(() => { //點擊事件this.msg = this.msg})}}
}
二 、其它ets組件導入引用
在index.ets中引用
關鍵定內容:
import { ComponentA } from ‘./ComponentA’ //會自動導入
ComponentA({ msg: 10 })
import { ComponentA } from './ComponentA'
@Entry
@Component
struct Index {@State message: string = '工欲善其事,必先利其器'@State message2: string = ''@State message3: string = '擁抱時代'@State message4: string = '點11擊事件'@State message5: number = 2build() {Row() {Column() {//引入組件ComponentAComponentA({ msg: 10 })Divider().padding(10)//引入組件ComponentAComponentA({ msg: 2 })}}}
}
結果預覽: