在HarmonyOS ArkTS中,需用@Link实现登录页输入框与业务逻辑的双向同步:父组件用@State声明变量,子组件用@Link接收,并通过$符号传递完成绑定,确保修改实时同步。

在HarmonyOS ArkTS开发中,实现登录页用户名和密码输入框与业务逻辑实时同步,避免手动更新变量、重复校验或状态错位,必须用@Link建立父子组件间真正的双向数据通道。
父组件中声明可绑定状态
在父组件(如LoginView.ets)顶部使用@State声明原始数据变量,例如:@State userName: string = '' 和 @State password: string = ''。这一步不可省略,@Link必须绑定到@State、@StorageLink或@Provide等具备响应能力的源变量上。
注意:不能直接将普通let/const变量传给@Link,否则子组件修改后父组件状态不会更新,【绑定失败时界面看似正常但数据无法回传】。
子组件内声明@Link变量
新建TextInput子组件(如InputField.ets),在类成员处用@Link修饰接收变量:
@Link value: string
该变量无需初始化值,也不能赋默认值——【本地初始化会触发编译错误】。ArkTS强制要求@Link变量必须由父组件注入,否则类型检查通不过。
接着在build()中将TextInput的onChange事件与@Link变量联动:
TextInput().onChange((text: string) => { this.value = text })
父子组件完成连接
第一步:在父组件引用子组件时,使用$操作符传递状态变量:
InputField({ value: $userName })
第二步:确保传递的变量名与子组件@Link声明的字段名完全一致(区分大小写),且类型严格匹配——string对string,number对number。
第三步:验证双向性——在父组件里修改this.userName = 'test',子组件TextInput内容自动刷新;在子组件输入框内打字,父组件的userName值立刻同步变更。
这一步操作起来很简单,直接把$符号加在变量前就行,但漏掉$就变成单向@Prop传值,失去“双向”能力。
处理对象类型数据
方法一:对class实例使用@Observed + @Link
定义被观察类:@Observed class UserInfo { name: string = ''; age: number = 0 }
父组件声明:@State userInfo = new UserInfo()
子组件接收:@Link userInfo: UserInfo
调用时仍用Child({ userInfo: $userInfo }),修改属性如this.userInfo.name = 'Alice'即可触发双向同步。
方法二:避免直接替换整个对象——【this.userInfo = new UserInfo()会导致绑定断裂】,只能改属性,不能换引用。

















