HarmonyOS鸿蒙Next中父子组件双向数据绑定错误

你的代码问题在于装饰器使用不当，导致数据流混乱。在HarmonyOS Next中，实现父子组件双向绑定需要严格遵循装饰器的数据流向规则。

主要问题分析：

1. @Prop 装饰器是单向的：你试图在子组件中修改 inputValue，但 @Prop 修饰的变量在子组件内部是只读的，修改不会同步回父组件。这是 userName 绑定失效的根本原因。

2. @Link 装饰器使用错误：@Link 装饰的变量必须与父组件的 @State, @Link, @Prop, @Provide, @Consume 或 [@ObjectLink](/user/ObjectLink) 装饰的变量建立双向绑定。你虽然传入了 userForm，但子组件中 @Link formData 的初始化 = { phone: '', code: '' } 是无效且错误的。@Link 变量必须由父组件在构造参数中初始化。

解决方案：

你需要根据不同的数据绑定需求，选择正确的装饰器组合。

方案一：实现基础类型的双向绑定（针对 userName）

对于 userName 这类简单字符串，应使用 @Link 装饰器来实现双向同步。

• 修改子组件 CustomInput：

  @Component
  struct CustomInput {
    // 将 @Prop 改为 @Link
    @Link inputValue: string
    // 移除 @Link formData 的无效初始化
    @Link formData: { phone: string, code: string }
  
    build() {
      Column({ space: 8 }) {
        TextInput({ text: this.inputValue })
          .width('100%')
          .height(48)
          .onChange((value: string) => {
            // 现在可以正确修改并同步到父组件
            this.inputValue = value
          })
        // ... formData 部分保持不变
      }
      .width('100%')
    }
  }
  

• 修改父组件 FormPage 的调用方式：

  CustomInput({
    // 使用 $ 符号创建对 @State 变量的双向绑定引用
    inputValue: $userName,
    formData: $userForm
  })
  

方案二：实现对象内部属性的双向绑定（针对 userForm）

对于 userForm 这类对象，如果要绑定整个对象，使用 @Link 是正确的。但需要确保父组件传递的是引用（如方案一所示，使用 $ 操作符）。

如果你只需要绑定对象中的某个属性（如 phone），并进行双向同步，更推荐使用 [@ObjectLink](/user/ObjectLink) 装饰器，它专门用于观察对象内部属性的变化。

• 修改子组件 CustomInput（使用 @ObjectLink）：

  @Component
  struct CustomInput {
    @Link inputValue: string
    // 使用 [@ObjectLink](/user/ObjectLink) 替代 @Link 来观察对象的特定属性
    [@ObjectLink](/user/ObjectLink) formData: { phone: string, code: string }
  
    build() {
      Column({ space: 8 }) {
        // ... inputValue 部分
        TextInput({ text: this.formData.phone })
          .width('100%')
          .height(48)
          .onChange((value: string) => {
            // 直接修改对象属性，[@ObjectLink](/user/ObjectLink) 能观察到变化并同步
            this.formData.phone = value
          })
      }
      .width('100%')
    }
  }
  

• 父组件 FormPage 调用方式：

  CustomInput({
    inputValue: $userName,
    // 直接传递对象，不需要 $ 操作符
    formData: this.userForm
  })
  

总结与核心要点：

• 单向数据流使用 @Prop：子组件接收父组件数据，内部修改不同步回父组件。
• 简单类型双向绑定使用 @Link：子组件使用 @Link 声明，父组件通过 $ 操作符（例如 $userName）传递状态变量引用。
• 对象属性双向绑定使用 [@ObjectLink](/user/ObjectLink)：子组件使用 [@ObjectLink](/user/ObjectLink) 声明，父组件直接传递状态对象（例如 this.userForm）。[@ObjectLink](/user/ObjectLink) 会深度观察对象第一层属性的变化。
• 初始化：@Link 和 [@ObjectLink](/user/ObjectLink) 修饰的变量不得在子组件内部初始化，必须由父组件通过构造参数提供。
• 对象更新：如果 userForm 本身需要被整体替换（例如 this.userForm = newForm），则必须使用 @Link。如果只是修改其内部属性，使用 [@ObjectLink](/user/ObjectLink) 更合适。

按照上述方案修正你的装饰器使用方式和传参语法，即可解决双向绑定失效的问题。