如何在ArkTS中实现组件间的双向数据绑定并展示代码？

Question

我正在开发一个需要双向数据绑定的组件，比如一个输入框和显示框，用户输入的内容需要实时显示在显示框中。请问在ArkTS中如何实现这种双向数据绑定？能否提供一个包含双向数据绑定逻辑的代码示例？

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

Answer 1

在ArkTS中实现双向数据绑定可以使用@Link装饰器或者twoWay属性。这里我给你个使用@Link装饰器的例子：

// ParentComponent.ts
@Component
struct ParentComponent {
  @Observed value: string = '';

  render() {
    return <ChildComponent value={this.value} />;
  }
}

// ChildComponent.ts
@Component
struct ChildComponent {
  @Link value: string;

  render() {
    return <Input value={this.value} onChange={(val) => this.value = val} />;
  }
}

在这个例子里，ParentComponent提供了一个value状态，ChildComponent则通过@Link装饰器与这个状态进行了双向绑定。当用户在Input组件中输入内容时，ChildComponent的value会自动更新，同时ParentComponent的value也会同步更新。

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