【HarmonyOS NEXT 】应用开发：ArkTS 父页面调用子组件调用实例
SDK：5.0.0DevEco 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”
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]