在ArkTS中，如何实现组件间的数据传递和状态共享？

Question

在ArkTS中，如何实现组件间的数据传递和状态共享？
本文参与了【 HarmonyOS NEXT 技术问答冲榜，等你来战！】，欢迎正在阅读的你也加入。

Answer 1

一、父组件向子组件传递数据
通过属性传递的方式，父组件可以将数据传递给子组件。例如：

@Component
struct ParentComponent {
  @State message: string = 'Hello from parent';

  build() {
    Column() {
      ChildComponent({ message: this.message });
    }
  }
}

@Component
struct ChildComponent {
  // 定义一个属性来接收父组件传递的数据
  message: string;

  build() {
    Text(this.message);
  }
}

二、子组件向父组件传递数据
可以通过回调函数的方式实现子组件向父组件传递数据。例如：

@Component
struct ParentComponent {
  @State parentMessage: string = 'Initial message';

  handleChildData(data: string) {
    this.parentMessage = data;
  }

  build() {
    Column() {
      ChildComponent({ onSendData: this.handleChildData });
      Text(this.parentMessage);
    }
  }
}

@Component
struct ChildComponent {
  onSendData: (data: string) => void;

  build() {
    Column() {
      Button('Send data to parent')
      .onClick(() => {
          this.onSendData('Data from child');
        });
    }
  }
}

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