【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、页面代码：

1. @Component
2. export struct Child {
3.   @Prop name: string
4.   @State message: string = '子组件一';
5.   
6.   build() {
7.     Row() {
8.       // 文本 函数名（参数）对象.方法名(参数) 枚举名.常量名
9.       Text(this.message)
10.         .fontSize(30) // 设置文本的文字大小
11.         .fontWeight(FontWeight.Bold) // 设置文本的粗细
12.         .fontColor(Color.Blue) // 设置文本的颜色
13.         .alignRules({
14.           center: { anchor: '__container__', align: VerticalAlign.Center },
15.           middle: { anchor: '__container__', align: HorizontalAlign.Center }
16.         })
17.     }
18.   }
19. }

复制代码

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

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

1. @Component
2. struct ChildTwo {
3.   @Prop name: string
4.   @State message: string = '子组件二';
6.   build() {
7.     Row() {
8.       // 文本 函数名（参数）对象.方法名(参数) 枚举名.常量名
9.       Text(this.message)
10.         .fontSize(30)// 设置文本的文字大小
11.         .fontWeight(FontWeight.Bold)// 设置文本的粗细
12.         .fontColor(Color.Red)// 设置文本的颜色
13.         .alignRules({
14.           center: { anchor: '__container__', align: VerticalAlign.Center },
15.           middle: { anchor: '__container__', align: HorizontalAlign.Center }
16.         })
17.     }
18.   }
19. }

复制代码

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

1. import router from '@system.router';
2. import { Child } from "../components/Child/index.ets"
4. @Entry
5. @Component
6. struct Parent {
7.   @State message: string = '父级页面';
9.   // 构建界面
10.   build() {
11.     // 采用相对布局的容器，支持容器内部的子元素设置相对位置关系。子元素支持指定兄弟元素作为锚点，也支持指定父容器作为锚点，基于锚点做相对位置布局。下图是一个RelativeContainer的概念图，图中的虚线表示位置的依赖关系。
12.     RelativeContainer() {
13.       // Flex布局子项
14.       Flex(){
15.         Child().width("50%");
16.         ChildTwo({name: "nameUse"}).width("50%");
17.       }
19.       // 文本 函数名（参数）对象.方法名(参数) 枚举名.常量名
20.       Text(this.message)
21.         .fontSize(50) // 设置文本的文字大小
22.         .fontWeight(FontWeight.Bold) // 设置文本的粗细
23.         .fontColor(Color.Blue) // 设置文本的颜色
24.         .alignRules({
25.           center: { anchor: '__container__', align: VerticalAlign.Center },
26.           middle: { anchor: '__container__', align: HorizontalAlign.Center }
27.         })
28.     }
29.   }
30. }

复制代码

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。