HarmonyOS 父组中变量值改变，如何让子组件中的值跟着一起变化？

精选原创

鱼弦CTO 2024-07-11 11:32:59 博主文章分类：基础 ©著作权

文章标签 Text 数据自动更新 文章分类 HarmonyOS 后端开发 yyds干货盘点

©著作权归作者所有：来自51CTO博客作者鱼弦CTO的原创作品，请联系作者获取转载授权，否则将追究法律责任

在 HarmonyOS 中，实现父组件中的变量值改变时，子组件中的值也跟着变化，可以通过 @Observed、@State 和 @Link 装饰器来实现。以下示例展示了如何实现这种双向绑定，使得父组件的状态变更能够自动更新子组件的显示。

示例代码

定义父组件

import { Observed } from 'ohos-data-binding';
import { Column, Text, Button, Component, 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);
    }
  }
}

定义子组件

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

@Component
class ChildComponent extends ViewComponent {
  @Link message!: string;  // 使用 @Link 接受并反映父组件的状态

  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!";
        });
    }
  }
}

关键点解释

@Observed：

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

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

@Link：

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

@Link 允许子组件访问和反映父组件的数据，从而实现同步更新。

数据绑定机制：

父组件将自身的状态变量 parentMessage 通过属性传递给子组件。

子组件使用 @Link 接收并绑定该状态变量，这意味着当父组件的 parentMessage 发生变化时，子组件中的 message 会自动更新。

用户交互：

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