HarmonyOS 鸿蒙应用开发基础：父组件和子组件的通信方法总结

news2025/5/25 13:35:40

在鸿蒙开发中，ArkUI声明式UI框架提供了一种现代化、直观的方式来构建用户界面。然而，由于其声明式的特性，父组件与子组件之间的通信方式与传统的命令式框架有所不同。本文旨在详细探讨在ArkUI框架中，父组件和子组件通信的方法总结，以帮助开发者更好地理解和应用这些机制。

在鸿蒙ArkUI声明式UI框架中，父组件和子组件之间的通信主要有以下几种方式：

1. @Link装饰器 - 双向数据同步

特点：实现父子组件间的双向数据绑定
使用场景：当需要在父子组件间保持数据同步时
示例：

// 父组件
@Component
struct Parent {
  @State count: number = 0;
  
  build() {
    Column() {
      Child({ count: $count })  // 使用$传递状态变量
    }
  }
}

// 子组件
@Component
struct Child {
  @Link count: number;  // 接收父组件的状态变量
  
  build() {
    Button(`Count: ${this.count}`)
      .onClick(() => {
        this.count++;  // 可以直接修改，会同步到父组件
      })
  }
}

2. @Prop装饰器 - 单向数据同步

特点：父组件到子组件的单向数据传递
使用场景：当子组件只需要读取父组件数据，不需要修改时
示例：

// 父组件
@Component
struct Parent {
  @State message: string = "Hello";
  
  build() {
    Column() {
      Child({ message: this.message })
    }
  }
}

// 子组件
@Component
struct Child {
  @Prop message: string;  // 只能读取，不能修改
  
  build() {
    Text(this.message)
  }
}

3. @Provide/@Consume装饰器 - 跨组件通信

特点：支持跨多层组件的数据传递
使用场景：当需要在多层组件间共享数据时
示例：

// 父组件
@Component
struct Parent {
  @Provide message: string = "Hello";
  
  build() {
    Column() {
      Child()
    }
  }
}

// 子组件
@Component
struct Child {
  @Consume message: string;
  
  build() {
    Text(this.message)
  }
}

4. @Watch装饰器 - 数据变化监听

特点：监听数据变化并执行回调
使用场景：需要在数据变化时执行特定操作
示例：

@Component
struct Child {
  @Link @Watch('onCountChange') count: number;
  
  onCountChange() {
    console.log(`Count changed to: ${this.count}`);
  }
}

5. 事件回调 - 子组件到父组件通信

特点：通过事件触发父组件的方法
使用场景：子组件需要通知父组件执行某些操作
示例：

// 父组件
@Component
struct Parent {
  onChildEvent(data: string) {
    console.log(`Received from child: ${data}`);
  }
  
  build() {
    Column() {
      Child({ onEvent: this.onChildEvent })
    }
  }
}

// 子组件
@Component
struct Child {
  onEvent: (data: string) => void;
  
  build() {
    Button('Trigger Event')
      .onClick(() => {
        this.onEvent('Hello from child');
      })
  }
}

6. @ObjectLink装饰器 - 对象类型数据同步

特点：用于同步对象类型的属性变化
使用场景：当需要同步复杂对象数据时
示例：

@Observed
class User {
  name: string;
  age: number;
}

@Component
struct Child {
  @ObjectLink user: User;
  
  build() {
    Text(`Name: ${this.user.name}, Age: ${this.user.age}`)
  }
}

各种通信方式对比

方式	数据流向	装饰器	适用场景	代码复杂度
双向绑定	父↔子	@Link	表单控件等需要双向同步	★★☆
单向传递	父→子	@Prop	展示型组件数据传递	★☆☆
跨级通信	任意→子	@Provide/@Consume	主题/配置等全局状态	★★☆
状态监听	变化触发	@Watch	数据变化执行副作用	★★☆
事件通知	子→父	-	子组件触发父组件逻辑	★★☆
对象同步	父↔子	@ObjectLink	复杂对象数据同步	★★★