示例概览：

Harmony Next 的开发借助 bindSheet 实现对半模态窗口的绑定

知识点

1. 半模态窗口
2. 父子组件传值

组件

LoginComponent

@Component
struct LoginComponent {
  // @Prop 父子单项绑定值
  @Prop message:string = ''
  // @Link 父子双向绑定值
  @Link userName:string
  @Link password:string
  @Link isShow: boolean

  build() {
    Column({ space: 10 }){
      Row(){
        Text(this.message).fontSize('25')
      }
      .margin({top: 50})
      Row(){
        TextInput({placeholder:'请输入用户名'}).onChange((value)=>{
          this.userName = value
        })
      }.width('90%')
      Row(){
        TextInput({ placeholder: '请输入密码' }).onChange((value)=>{
          this.password = value
        })
      }.width('90%')
      Row(){
        Button('登陆').onClick(()=>{
          this.isShow = false
        })
      }
    }
    .height('100%')
    .width('100%')
  }
}

ModelTest

@Entry
@Component
struct ModelTest {
  @State message: string = '用户登录'
  @State isShow: boolean = false
  @State userName: string = ''
  @State password: string = ''

  @Builder
  LoginComponentBuilder() {
    Column() {
      LoginComponent({
        message: this.message,
        userName: this.userName,
        password: this.password,
        isShow: this.isShow
      })
    }
  }

  build() {
    Column({ space: 10 }) {
      Row() {
        Text('用户名')
        Text(this.userName)
      }

      Row() {
        Text('密码')
        Text(this.password)
      }

      Button('打开半模态窗口').onClick(() => {
        this.isShow = true
      })
      Button('更新数据').onClick(() => {
        this.message = '用户登录更新'
      })
    }
    .height('100%')
    .width('100%')
    .bindSheet(this.isShow, this.LoginComponentBuilder, {
      height: 300,
      enableOutsideInteractive: true,
    })
  }
}

效果图