HarmonyOS 开发基础（三）登录页面单向数据绑定（父组件向子组件传参）

一、目录结构认识

开发软件目录截图部分文件夹说明

文件组织结构图

二、完成单向数据绑定

index.etx

// 导出方式直接从文件夹
import MyInput from "../common/commons/myInput"
@Entry
@Component
/*
组件可以基于struct实现，组件不能有继承关系，struct可以比class更加快速的创建和销毁。*/
struct Index {@State message: string = 'Hello World'build() {Flex({direction:FlexDirection.Column,justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center}){Text("登录").fontSize(40).fontWeight(700)// 组件封装，完成父组件向子组件传参MyInput({placeholder:"请输入用户名"})MyInput({placeholder:"请输密码"})TextInput().width("80%").height(40)Button("进入app")}.width("100%").height("100%").border({width:15,color:"#000"})}
}

myinput.etx (需要放commons文件夹)

/*
单独处理输入框的渲染效果*/
@Component
struct MyInput {/*@Prop装饰的变量必须使用其父组件提供的@State变量进行初始化，允许组件内部修改@Prop变量，但更改不会通知给父组件，父组件变量的更改会同步到@prop装饰的变量，即@Prop属于单向数据绑定。*/@Prop placeholder :stringbuild(){TextInput({placeholder:this.placeholder}).width("80%").height(40)}
}//先导出
export default MyInput

preview 结果