《鸿蒙HarmonyOS 5.0开发教程》基础篇11：父子组件通信

父子组件通信，指的是父组件与子组件之间的数据传递或数据共享。

其中，父组件传递数据的方式只有 1 种，但子组件接收数据的方式有以下 3 种：

普通变量：初始渲染同步
@Prop装饰器：父子单向同步
@Link装饰器：父子双向同步

一、数据传递

1、子组件接收数据

在子组件中，我们可以通过 3 种方式来接收父组件传递的数据。

示例代码：

ts 复制代码

@Component
export struct ChildComponent {
  username: string = "张三";  // 普通变量
  @Prop age: number = 20;     // @Prop
  @Link gender: string;       // @Link

  build() {
    Column() {
      Text("子组件渲染数据:")
      Text(this.username)
      Text(`${this.age}`)
      Text(this.gender)
    }
  }
}

注意：

普通变量：必须设置初始值
@Prop：初始值可有可无
@Link：不能设置初始值

2、父组件传递数据

我们在父组件中通过 @State 定义出组件内部数据，父组件可以通过 Text 渲染这些数据，也可以把这些数据传递给子组件，在子组件中进行渲染。

不管子组件如何接收数据，父组件在调用渲染子组件时，都是以对象的形式向子组件传递数据：

ts 复制代码

import { ChildComponent } from '../components/ChildComponent'

@Entry
@Component
struct MyPage {
  @State username: string = "李华";
  @State age: number = 12;
  @State gender: string = "女"

  build() {
    Column() {
      Text("父组件渲染数据:")
      Text(this.username)
      Text(`${this.age}`)
      Text(this.gender)
      // 渲染子组件，同时传递数据给子组件
      ChildComponent({
        username: this.username,
        age: this.age,
        gender: this.gender
      })
    }
  }
}

二、数据修改

父子组件之间传递了数据后，父组件或者子组件都可以对数据进行修改，但修改后，会有一些不同的效果。

1、父组件修改数据

如果在父组件中修改了 @State 数据，首先父组件 自己的UI组件会全部更新 。同时，子组件中通过@Prop和@Link接收的数据，会随着父组件数据的修改而更新，但普通变量接收的数据不会更新：

ts 复制代码

build() {
  Column() {
    Text("父组件渲染数据:")
    Text(this.username)
    Text(`${this.age}`)
    Text(this.gender)
    
    Button("父组件修改数据").onClick((event: ClickEvent) => {
      this.username = "张三";
      this.age = 18;
      this.gender = "男";
    })
    
    ChildComponent({
      username: this.username,
      age: this.age,
      gender: this.gender
    })
  }
}

代码执行后效果如下：

2、子组件修改数据

除了父组件可以修改自己的数据外，子组件也可以修改接收到的数据。子组件修改了数据后，页面变化如下：

子组件中普通变量 接收的数据，修改后父子组件都不会更新（初始渲染同步）；
子组件中**@Prop接收的数据，修改后子组件更新，父组件不会更新（单向同步）**；
子组件中**@Link接收的数据，修改后子组件更新，父组件也会更新（双向同步）**；

子组件示例代码如下：

ts 复制代码

build() {
  Column() {
    Text("子组件渲染数据:")
    Text(this.username)
    Text(`${this.age}`)
    Text(this.gender)
    
    Button('子组件修改数据').onClick((event: ClickEvent) => {
      this.username = "王五";
      this.age = 20;
      this.gender = "保密";
    })
  }
}

代码执行后效果如下：