ArkTS中自定义组件

程序媛_MISS_zhang_0110

已于 2024-01-15 14:57:25 修改

阅读量772

点赞数 9

分类专栏： ArtTS 文章标签：鸿蒙前端

于 2024-01-15 14:57:10 首次发布

本文链接：https://blog.csdn.net/MISS_zhang_0110/article/details/135601217

版权

ArtTS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了如何在ArkTS项目中创建和使用自定义组件，如Hello.ets组件的结构和用法，以及在Second.ets中的应用，强调了组件命名规则和@Component/@Entry装饰器的作用。

摘要由CSDN通过智能技术生成

一、组件位置

一个项目下所有的自定义的组件名不可以重复，无论是否在一个ets文件中

在这里插入图片描述

二、Hello.ets自定义组件

自定义组件

1：组件必须使用@Component装饰
2：@Entry装饰在哪个组件上，页面就展示哪个组件（主组件）
3：被@Entry装饰的主组件，build()中必须有且仅有一个根容器组件，其它自定义组件，build()中有且仅有一个根组件。

@Component
export struct Hello {
    private  title:ResourceStr
     build(){
       Row(){
         Text(this.title)
           .fontSize(30)
           .fontWeight(FontWeight.Bold)
       }
     }

}

三、Second.ets父组件

在这里插入图片描述

// Second.ets
import {Hello} from '../compontent/Hello'
@Entry
@Component
struct Second {
  @State message: string = 'Hi there'
  build() {
    Row() {
      Column() {
        Hello({title:'hello组件'}
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Divider()
      }
      .width('100%')
    }
    .height('100%')
  }
}