在 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);
}
}
}
定义子组件
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!";
});
}
}
}
关键点解释
@Observed:
用于父组件声明一个可观察的数据变量 parentMessage。
当这个变量发生变化时,会触发绑定的子组件重新渲染。
@Link:
子组件通过 @Link 修饰符接收从父组件传递的数据变量 message。
@Link 允许子组件修改父组件的数据,从而实现双向绑定。
双向绑定实现:
父组件通过属性传递将自己的状态(parentMessage)传给子组件。
子组件通过 @Link 接收并操作这个状态,实现父组件和子组件间的数据同步。
用户交互:
父组件和子组件各有一个按钮,用于展示如何通过用户交互修改状态,并反映在两个组件中。
总结
通过以上示例代码,可以看到如何利用 @Observed 和 @Link 实现父子组件之间的双向数据绑定。父组件定义一个可观察的状态,并通过属性传递给子组件。子组件通过 @Link 接收并操作这个状态,从而实现组件之间的数据同步和交互。