HarmonyOS 兄弟组件间相互传值的5 种方案

1. 使用 AppStorage（应用全局状态）

适用场景：

• 多个组件需要共享的简单全局状态（如用户登录信息、主题设置）。
• 数据变化需要自动同步到所有依赖组件。

实现步骤：

// 在父组件或入口文件设置全局状态
import AppStorage from '@ohos.app.storage';

// 存储数据
AppStorage.SetOrCreate('username', 'Alice');

// 兄弟组件A读取/修改
@StorageLink('username') username: string = ''; // 自动同步
Text(this.username).onClick(() => { this.username = 'Bob'; });

// 兄弟组件B监听变化
@StorageLink('username') currentUser: string = '';
Text(`User: ${this.currentUser}`); // 自动更新

优点：

• 自动响应式更新
• 跨页面共享

缺点：

• 不适合复杂对象（需序列化）

2. 使用 EventHub（事件总线）

适用场景：

• 组件间松耦合通信（如触发事件通知）。
• 一对多的消息广播。

实现步骤：

// 在Ability中初始化EventHub
import common from '@ohos.app.ability.common';

const eventHub = new common.EventHub();

// 兄弟组件A发送事件
eventHub.emit('dataUpdate', { key: 'value' });

// 兄弟组件B监听事件
eventHub.on('dataUpdate', (data) => {
  console.log('Received:', data.key);
});

// 组件销毁时取消监听
eventHub.off('dataUpdate');

优点：

• 完全解耦
• 支持任意数据类型

缺点：

• 需手动管理订阅/取消

3. 通过父组件中转（Props + Callback）

适用场景：

• 兄弟组件有共同父组件且逻辑紧密关联。
• 需要严格的数据流向控制。

实现步骤：

// 父组件 Parent.ets
@State sharedData: string = '';

build() {
  Column() {
    ChildA({ data: this.sharedData, onDataChange: (newVal) => { this.sharedData = newVal } })
    ChildB({ data: this.sharedData })
  }
}

// 子组件A ChildA.ets
@Prop data: string = '';
@Link onDataChange: (val: string) => void;

Button('Update').onClick(() => { this.onDataChange('New Value'); })

// 子组件B ChildB.ets
@Prop data: string = '';
Text(this.data)

优点：

• 数据流清晰可追踪
• 适合父子关系明确的场景

缺点：

• 层级较深时代码冗余

4. 使用分布式数据管理（跨设备场景）

适用场景：

• 兄弟组件位于不同设备的同一应用中（如手机与手表）。

实现步骤：

// 初始化分布式KV Store
import distributedData from '@ohos.data.distributedData';

const kvManager = await distributedData.createKVManager({ /* config */ });
const kvStore = await kvManager.getKVStore('storeId');

// 设备A写入数据
await kvStore.put('key', 'value');

// 设备B监听数据变化
kvStore.on('dataChange', (data) => {
  console.log('Data changed:', data);
});

优点：

• 支持跨设备同步
• 自动冲突解决

缺点：

• 仅限鸿蒙分布式设备

5. 使用 PersistentStorage（持久化状态）

适用场景：

• 需要持久化的兄弟组件共享数据（如用户偏好）。

实现步骤：

import PersistentStorage from '@ohos.app.storage';

// 初始化
PersistentStorage.persistProp('theme', 'light');

// 组件A设置
PersistentStorage.set('theme', 'dark');

// 组件B读取
@StorageLink('theme') theme: string = '';
Text(`Current theme: ${this.theme}`);

优点：

• 数据持久化
• 自动同步

缺点：

• 仅支持基础数据类型

方案对比总结

最佳实践建议

1. 优先选择 AppStorage：
   对于简单的全局状态（如用户信息、主题），使用 AppStorage 最便捷。
2. 事件驱动用 EventHub：
   如果组件需要解耦（如列表页通知详情页更新），选择事件总线。
3. 跨设备必选分布式KV：
   鸿蒙多设备协同场景下，分布式数据管理是唯一方案。
4. 避免深层Props传递：
   超过3层组件嵌套时，改用全局状态或事件总线。

通过合理选择通信方式，可以高效实现鸿蒙兄弟组件间的数据交互。