在 HarmonyOS 中，父子组件之间的双向数据绑定可以使用 @Observed、@State 和 @Link 装饰器来实现。这些装饰器提供了一种便捷的方式，使得父组件和子组件能够共享和同步状态。


示例代码

定义父组件


import { Observed } from 'ohos-data-binding';
import { Component, Column, Text, Button, ViewComponent } from 'ohos-jsb-hicore';

@Component
class ParentComponent extends ViewComponent {
  @Observed parentMessage: string = "Hello from Parent!";

  build() {
    Column() {
      // 显示父组件的消息
      Text(this.parentMessage)
        .margin({top: 20})
        .width('100%')
        .height(50);

      // 按钮用于修改父组件的消息
      Button("Update Message in Parent")
        .margin({top: 20})
        .onClick(() => {
          this.parentMessage = "Parent updated the message!";
        });

      // 引入子组件并传递父组件的信息
      ChildComponent()
        .message(this.parentMessage);
    }
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.

定义子组件


import { Link } from 'ohos-data-binding';
import { Component, Column, Text, Button, ViewComponent } from 'ohos-jsb-hicore';

@Component
class ChildComponent extends ViewComponent {
  @Link message!: string;

  build() {
    Column() {
      // 显示子组件接收到的父组件消息
      Text(this.message)
        .margin({top: 20})
        .width('100%')
        .height(50);

      // 按钮用于修改父组件的消息
      Button("Update Message in Child")
        .margin({top: 20})
        .onClick(() => {
          this.message = "Child updated the message!";
        });
    }
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.

关键点解释

@Observed：


用于父组件声明一个可观察的数据变量 parentMessage。

当这个变量发生变化时，会触发绑定的子组件重新渲染。

@Link：


子组件通过 @Link 修饰符接收从父组件传递的数据变量 message。

@Link 允许子组件修改父组件的数据，从而实现双向绑定。


双向绑定实现：


父组件通过属性传递将自己的状态（parentMessage）传给子组件。

子组件通过 @Link 接收并操作这个状态，实现父组件和子组件间的数据同步。

用户交互：


父组件和子组件各有一个按钮，用于展示如何通过用户交互修改状态，并反映在两个组件中。


总结

通过以上示例代码，可以看到如何利用 @Observed 和 @Link 实现父子组件之间的双向数据绑定。父组件定义一个可观察的状态，并通过属性传递给子组件。子组件通过 @Link 接收并操作这个状态，从而实现组件之间的数据同步和交互。