HarmonyOS 鸿蒙Next中父子通信

楼主，在HarmonyOS开发中，即使不使用 @Prop 装饰器，仍有多种方式可以实现父组件向子组件传递数据。以下是常见的替代方案及实现思路：

一、使用 @Link 装饰器（双向同步）

虽然 @Link 主要用于双向数据同步，但它仍然通过属性传递数据，只是装饰器类型不同。父组件传递状态变量，子组件通过 @Link 接收并可直接修改父组件数据。

// 父组件
@Entry
@Component
struct Parent {
  @State parentData: string = "初始数据";

  build() {
    Column() {
      ChildWithLink({ parentData: $parentData }) // 使用$符号传递双向绑定
    }
  }
}

// 子组件
@Component
struct ChildWithLink {
  [@Link](/user/Link) parentData: string; // 接收父组件数据

  build() {
    Text(this.parentData)
  }
}

二、使用 @Provide 和 @Consume（跨层级传递）

通过依赖注入实现跨层级通信，父组件提供数据（@Provide），子组件直接消费（@Consume），无需逐层传递。

// 父组件
@Entry
@Component
struct Parent {
  [@Provide](/user/Provide)("sharedData") data: string = "共享数据";

  build() {
    Column() {
      ChildComponent()
    }
  }
}

// 子组件（可以是任意层级的子孙组件）
@Component
struct ChildComponent {
  [@Consume](/user/Consume)("sharedData") childData: string; // 直接获取父组件数据

  build() {
    Text(this.childData)
  }
}

三、通过事件或回调函数

父组件将方法作为参数传递给子组件，子组件通过调用该方法触发父组件逻辑，间接传递数据（适用于动态交互场景）。

// 父组件
@Entry
@Component
struct Parent {
  @State receivedData: string = "";

  // 定义回调函数
  handleChildData = (data: string) => {
    this.receivedData = data;
  };

  build() {
    Column() {
      ChildComponent({ onDataChange: this.handleChildData })
      Text(`子组件传递的数据：${this.receivedData}`)
    }
  }
}

// 子组件
@Component
struct ChildComponent {
  private onDataChange: (data: string) => void; // 接收父组件回调函数

  build() {
    Button("传递数据给父组件")
      .onClick(() => {
        this.onDataChange("来自子组件的数据");
      })
  }
}

四、全局状态管理（AppStorage/LocalStorage）

通过全局状态管理工具（如 AppStorage）实现数据共享，父组件设置数据，子组件直接读取。

// 父组件设置数据
AppStorage.SetOrCreate("globalData", "全局数据");

// 子组件获取数据
@Component
struct ChildComponent {
  @StorageLink("globalData") childData: string;

  build() {
    Text(this.childData)
  }
}

五、事件总线（EventBus）

通过自定义事件中心实现组件间通信，父组件发布事件，子组件订阅并接收数据。

// 定义事件总线（简化示例）
class EventBus {
  static emit(event: string, data: any) { /* 发布事件逻辑 */ }
  static on(event: string, callback: (data: any) => void) { /* 订阅事件逻辑 */ }
}

// 父组件发布数据
EventBus.emit("parentToChild", "通过事件传递的数据");

// 子组件订阅数据
@Component
struct ChildComponent {
  @State data: string = "";

  onPageShow() {
    EventBus.on("parentToChild", (data: string) => {
      this.data = data;
    });
  }

  build() {
    Text(this.data)
  }
}

选择建议

• 简单单向传递：优先使用 @Provide/@Consume 或全局状态管理。
• 动态交互场景：通过回调函数或事件总线实现灵活通信。
• 跨组件层级较深：依赖注入（@Provide/@Consume）或全局状态更高效。

emit