@Component注解的作用是用来构建自定义组件,具体的说明可以参考资料:@Component组件官方文档

@Component自定义组件的简单使用

本文通过一个简单的例子来说明@Component的作用。例子代码如下:
在下面代码提供了两个组件AComponentBComponent ,每个组件都提供了一个Text文本组件,其中AComponent使用了BComponent组件。

@Entry
@Component
struct AComponent {
  //自定义组件必须定义build方法。
  build() {
    Row() {
      Column() {
        //蓝色文字
        Text("AComponent").fontSize(30).fontColor(Color.Blue)
        //红色文字
        BComponent()
      }.width('50%')
    }
    .height('100%')
  }
}

@Component
struct BComponent {
  build() {
    Text("BComponent").fontSize(30).fontColor(Color.Red)
  }
}

运行效果如下
在这里插入图片描述

组件发布

当我们需要将X文件下的组件交给Y文件下的组件使用的时候,需要使用export修饰,比如我们将 FirstPage.ets文件的AComponent发布出去:
在这里插入图片描述
那么在SecondPage.ets就可以使用了:
在这里插入图片描述

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐