如何在ArkTS中结合使用@Prop和@Link装饰器，以实现父子组件间的灵活数据同步？

Question

我在开发过程中发现，有时需要在父子组件间实现既单向又双向的数据同步。请问如何结合使用@Prop和@Link装饰器，以实现这种灵活的数据同步机制？能否提供一个代码示例，展示如何实现这一功能？

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

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

Answer 1

在选择使用@Prop装饰器还是@Link装饰器时，需要根据具体的需求来决定。@Prop装饰器用于父子组件间的单向数据同步，父组件将数据传递给子组件，但子组件不能直接修改父组件的数据。@Link装饰器则用于父子组件间的双向数据同步，允许子组件修改父组件的数据。

// 使用@Prop的单向同步
@Component
struct ChildWithProp {
  @Prop parentData: string;

  render() {
    return <Text>{this.parentData}</Text>;
  }
}

// 使用@Link的双向同步
@Component
struct ChildWithLink {
  @Link parent: any; // 假设parent是父组件的引用

  updateParentData() {
    this.parent.parentData = 'Updated by Child';
  }

  render() {
    return <Button onClick={this.updateParentData}>Update Parent Data</Button>;
  }
}

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