如何在使用@Link装饰器实现父子组件双向同步时，避免循环依赖？

Question

我在尝试使用@Link装饰器实现父子组件间的双向数据同步时，遇到了循环依赖的问题。请问如何在使用@Link装饰器时避免循环依赖，并确保数据的正确同步？能否提供一个代码示例，展示如何安全地使用@Link装饰器？

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

自适应布局、多设备间页面适配和兼容 --来自郝老师直播间

Answer 1

在使用@Link装饰器实现父子组件双向同步时，需要避免创建循环依赖。循环依赖会导致数据流动混乱，甚至引发应用崩溃。为了避免循环依赖，可以确保每个组件只负责自己的数据逻辑，并通过事件或回调来同步父子组件间的数据。

// 父组件
@Entry
@Component
struct Parent {
  @State parentData: string = 'Hello from Parent';

  onChildDataChange(newData: string) {
    this.parentData = newData;
  }

  render() {
    <Child @dataChange={this.onChildDataChange} />
  }
}

// 子组件
@Component
struct Child {
  @Link(Parent) parent: any; // 假设这里通过某种方式获取到父组件的引用，实际中不推荐这么做
  @State childData: string = 'Hello from Child';

  syncDataToParent() {
    this.parent.onChildDataChange(this.childData + ' - Updated by Child');
  }

  render() {
    <Button onClick={this.syncDataToParent}>Sync Data to Parent</Button>
  }
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。