【HarmonyOS NEXT 】应用开发：ArkTS 父页面调用子组件调用实例

SDK：5.0.0
DevEco Studio：5.0.3
Node.js：18.20.1

子组件一：新建页面

1、创建页面：src > main > ets > pages > components > Child > index.ets
2、页面代码：

@Component
export struct Child {
  @Prop name: string
  @State message: string = '子组件一';
  
  build() {
    Row() {
      // 文本 函数名（参数）对象.方法名(参数) 枚举名.常量名
      Text(this.message)
        .fontSize(30) // 设置文本的文字大小
        .fontWeight(FontWeight.Bold) // 设置文本的粗细
        .fontColor(Color.Blue) // 设置文本的颜色
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
    }
  }
}

备注：

1、接收父组件的传参写法：@Prop name: string
2、在构造页面时前面要加上export，将代码抛出，否则父组件无法识别

子组件二：与主组件在同一页面

1、与父组件路径：src > main > ets > pages > Parent > index.ets
2、页面代码

@Component
struct ChildTwo {
  @Prop name: string
  @State message: string = '子组件二';

  build() {
    Row() {
      // 文本 函数名（参数）对象.方法名(参数) 枚举名.常量名
      Text(this.message)
        .fontSize(30)// 设置文本的文字大小
        .fontWeight(FontWeight.Bold)// 设置文本的粗细
        .fontColor(Color.Red)// 设置文本的颜色
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
    }
  }
}

备注：

1、接收父组件的传参写法：@Prop name: string
2、在构造页面时前面要加上export，将代码抛出，否则父组件无法识别

父组件

import router from '@system.router';
import { Child } from "../components/Child/index.ets"

@Entry
@Component
struct Parent {
  @State message: string = '父级页面';

  // 构建界面
  build() {
    // 采用相对布局的容器，支持容器内部的子元素设置相对位置关系。子元素支持指定兄弟元素作为锚点，也支持指定父容器作为锚点，基于锚点做相对位置布局。下图是一个RelativeContainer的概念图，图中的虚线表示位置的依赖关系。
    RelativeContainer() {
      // Flex布局子项
      Flex(){
        Child().width("50%");
        ChildTwo({name: "nameUse"}).width("50%");
      }

      // 文本 函数名（参数）对象.方法名(参数) 枚举名.常量名
      Text(this.message)
        .fontSize(50) // 设置文本的文字大小
        .fontWeight(FontWeight.Bold) // 设置文本的粗细
        .fontColor(Color.Blue) // 设置文本的颜色
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
    }
  }
}

备注

调用子组件方法：
import { Child } from “…/components/Child/index.ets”