如何在鸿蒙应用中实现跨组件的数据传递？

Question

我在开发一个鸿蒙应用时，发现需要在不同的组件之间传递数据。但是我发现直接通过属性传递数据不太方便。请问有没有更好的方法来实现跨组件的数据传递？能否提供一个代码示例来展示如何实现？

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

Answer 1

首先，你可以创建一个全局的Context对象，并在其中存储需要共享的数据：

// GlobalContext.ts
import context from '@ohos.multimodalinput.context';

const GlobalContext = context.createContext({
  sharedData: '这是共享的数据',
  // 可以添加更多需要共享的状态或方法
});

export default GlobalContext;

然后，在需要提供数据的组件中，你可以将这个Context对象提供给其子组件：

// ParentComponent.ts
import GlobalContext from './GlobalContext';

@Component
struct ParentComponent {
  build() {
    return (
      <div>
        <Provider context={GlobalContext}>
          <ChildComponent />
        </Provider>
      </div>
    );
  }
}

在需要接收数据的子组件中，你可以通过context属性来访问这个Context对象中的数据：

// ChildComponent.ts
@Component
struct ChildComponent {
  @Consume(GlobalContext) context: any;

  build() {
    return (
      <Text>{this.context.sharedData}</Text>
    );
  }
}

在这个例子中，ParentComponent通过Provider组件将GlobalContext提供给其子组件ChildComponent。然后，ChildComponent通过@Consume装饰器来访问GlobalContext中的数据。

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