HarmonyOS 鸿蒙Next中TextInput双向绑定失败

楼主你好：

@Link装饰的变量禁止本地初始化，否则编译期会报错。官网中有明确说明，详见限制条件。其次@Link需要和@State类型保持完全一致，且必须从父组件初始化。如果没有父组件的初始化，会出现crash：

throw new SyntaxError(`${this.debugInfo()}: constructor: source variable in parent/ancestor @Component must be defined. Application error!`);

关于如何实现组件的双向绑定同步，补充一些学习点：

【背景知识】 ArkUI状态管理有两个版本：状态管理（V1）和状态管理（V2），在状态管理（V1）中，实现组件双向同步的方法有$$语法，[@Link装饰器](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-link)，[@Provide装饰器和@Consume装饰器](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-provide-and-consume)等，而在状态管理（V2）中，也有相应的方法实现数据双向同步，例如!!语法，[@Provider装饰器和@Consumer装饰器](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-new-provider-and-consumer)等，本文旨在对这些方法进行简单的分类介绍，以及对比。

【解决方案】

• 场景一：系统组件的内部状态和状态变量的双向同步。

  • 在状态管理V1中，可以使用$$语法实现双向绑定变量，使用方法是在变量名前添加，例如$$this.text，$$绑定的变量变化时，会触发UI的同步刷新。例如，使用单选框组件Radio来控制状态，并通过监听状态变化来执行特定操作：使用@Watch监听状态变量，通过配合$$将状态变量与组件状态双向绑定，实现限制单选框组件Radio的切换，示例代码如下:

    @Entry
    @Component
    struct TestGPage {
      [@State](/user/State) @Watch('radioChangeA') flagA : boolean = false;
      [@State](/user/State) @Watch('radioChangeB') flagB : boolean = false;
      [@State](/user/State) currentIndex:number = 1
      radioChangeA(){
        console.info('触发修改A');
      }
    
      radioChangeB(){
        console.info('触发修改B');
        if(this.currentIndex == 1){
          this.flagB =  true
        } else{
         this.flagB =  false
       }
      }
    
     build() {
      Row() {
      Column() {
        Text('Radio1')
        Radio({ value: 'Radio1', group: 'radioGroup' }).checked($$this.flagA)
        Radio({ value: 'Radio2', group: 'radioGroup' }).checked($$this.flagB)
          }
      .width('100%')
        }
    .height('100%')
      }
    }
    

  • 而在状态管理V2中，!!语法能够实现双向绑定，添加方式是在变量名后添加，例如isShow!!，具体实现可参考官网系统组件参数双向绑定使用示例。

相同点：两种方法都可以为系统组件提供状态变量的引用，使得状态变量和系统组件的内部状态保持同步；绑定的变量变化时，都会触发UI的同步刷新；都支持绑定基础类型变量。 不同点：两种方法支持的系统组件范围略有不同，具体可以参考官网!!使用规则和$$使用规则。此外，!!语法还可以配合@Param装饰器@Event装饰器实现自定义组件之间的双向绑定。 适用场景对比：

• 场景二：父子组件建立双向数据同步。

  • 在状态管理V1中，提供了[@Link装饰器](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-link)实现父子组件的双向数据同步：通过@Link装饰器实现组件间的数据同步，使得父子组件之间的数据变化能够即时反映在对方组件中，具体代码实现可参考官网简单类型和类对象类型的@Link。

  • 在状态管理V2中，提供了@Param实现父到子的单向传递，子组件再通过@Event回调函数触发父组件的状态更新。这种方式使得状态流向更加明确，代码结构更加清晰，维护成本较低，具体代码示例可参考官网更改父组件中变量。

相同点：两种方法都能够实现父子组件的双向同步。 不同点：@Link是父组件的状态变量与子组件@Link装饰的变量建立双向同步，当其中一方改变时，另一方也会同步更新。而@Param和@Event，父组件同步数据给子组件的过程是异步的。@Event修改父组件的值是立刻生效的，但从父组件将变化同步回子组件的过程是异步的，即在调用完@Event的方法后，子组件内的值不会立刻变化。这是因为@Event将子组件值实际的变化能力交由父组件处理，在父组件实际决定如何处理后，将最终值在渲染之前同步回子组件。 适用场景对比：

• 场景三：多层级组件下数据的双向同步。

  • 状态管理V1提供了[@Provide装饰器和@Consume装饰器](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-provide-and-consume)，能够将状态数据在多个层级之间传递，与后代组件双向同步，实现跨组件层级的双向同步，具体代码实现可参考官网[@Provide和@Consume使用示例](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-provide-and-consume#观察变化)。

  • 状态管理V2中，提供了[@Provider装饰器和@Consumer装饰器](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-new-provider-and-consumer)用于父子组件以及跨组件层级之间的数据双向同步。父组件使用@Provider提供数据，子组件通过@Consumer消费数据，并可通过事件等方式通知父组件更新数据，具体实现可参考官网[@Provider和@Consumer双向同步示例](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-new-provider-and-consumer#provider和consumer双向同步)。

两种方式的对比可以参考官网[@Provider和@Consumer vs @Provide和@Consume能力对比](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-new-provider-and-consumer#provider和consumer-vs-provide和consume能力对比)。 适用场景对比：

• 场景四：多层嵌套场景下的数据双向同步。

  • 该场景下状态管理V1提供了@Observed装饰器和@ObjectLink装饰器，实现嵌套层级下的父子类双向同步，能够解决复杂对象内部属性的相应式更新的问题。适用于嵌套对象属性修改、数组元素更新、修改大型对象的局部属性等场景。 在如下示例中，在ViewModel中使用@ObjectLink装饰器装饰类进行双向数据同步，并且将IndexViewModel、IndexItemViewModel都用@Observed修饰来监听嵌套类对象属性的变化，从而在数据变化时通过同步的对象属性来触发UI渲染，示例代码如下：

    interface IndexItemViewModelType {
      name: string
      selected: boolean
      selectItem(): void
    }
    
    [@Observed](/user/Observed)
    class IndexItemViewModel implements IndexItemViewModelType {
     name: string
     selected: boolean
    constructor(name: string) {
    this.name = name
    this.selected = false
    }
    
    selectItem(): void {
       this.selected = !this.selected
       }
     }
    
    interface IndexViewModelType {
     items: IndexItemViewModelType[]
     }
    
    @Component
    struct CustomRow{
       [@ObjectLink](/user/ObjectLink) viewModel: IndexItemViewModel
      build() {
        Column() {
          Text(this.viewModel.name)
            .fontColor(this.viewModel.selected ? Color.Red : Color.Green)
          Button('name change').fontSize(20).onClick(() => {
            this.viewModel.name = this.viewModel.name + "c1"
          })
        }
      }
    }
     [@Observed](/user/Observed)
    class IndexViewModel implements IndexViewModelType {
       items: IndexItemViewModelType[]
      constructor() {
         this.items = [
          new IndexItemViewModel('测试数据1'),
          new IndexItemViewModel('测试数据2'),
          new IndexItemViewModel('测试数据3'),
          new IndexItemViewModel('测试数据4'),
          new IndexItemViewModel('测试数据5'),
          new IndexItemViewModel('测试数据6'),
          new IndexItemViewModel('测试数据7'),
         ]
      }
    }
    
    @Entry
    @Component
    struct Index {
      [@State](/user/State)
      viewModel: IndexViewModelType = new IndexViewModel()
      build() {
        Column() {
          List({ space: 10 }) {
            ForEach(this.viewModel.items, (item: IndexItemViewModelType, index: number) => {
              ListItem() {
                CustomRow({ viewModel: item })
              }
              .onClick(() => {
                item.selectItem()
              })
            })
          }
          .width('100%')
          .height('50%')
          CustomRow({ viewModel: this.viewModel.items[0] })
          CustomRow({ viewModel: this.viewModel.items[1] })
        }
      }
    }
    

  • 状态管理V2暂未提供该场景下的相关方法，建议等待后续更新。

【总结】 实现组件数据双向同步的方法总结如下，开发者可自行选择：