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

news2024/9/20 18:00:18

一、目录结构认识

开发软件目录截图部分文件夹说明
在这里插入图片描述
文件组织结构图

二、完成单向数据绑定

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 :string
  build(){
    TextInput({placeholder:this.placeholder})
      .width("80%")
      .height(40)

  }
}

//先导出
export default MyInput

preview 结果
在这里插入图片描述