HarmonyOS NEXT鸿蒙开发：父组件引用子组件（@Prop）-马育民老师

# 介绍

[官网指南](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-create-custom-components-V5 "官网指南")

如果在另外的文件中引用该自定义组件，需要使用 `export` 关键字导出，并在使用的页面 `import` 该自定义组件

# @Prop

在 ArkTS 中，`@Prop` 是**父子组件间单向数据传递**的核心装饰器，用于实现**父组件向子组件传递数据**，并建立“父组件数据变化时，子组件自动更新”的绑定关系。

### 核心作用
1. **接收父组件传递的数据**  
   子组件通过 `@Prop` 声明的变量，必须由父组件在调用时传入（除非设置默认值），形成“父传子”的单向数据流。

2. **建立单向绑定关系**  
   当父组件中传递给子组件的数据源发生变化时，子组件中 `@Prop` 修饰的变量会自动同步更新，并触发子组件的 UI 重新渲染。  
   （注意：子组件中修改 `@Prop` 变量**不会反向影响父组件**，这是“单向”的核心特点。）

### 适用场景

- 父组件向子组件传递**配置信息**（如标题、颜色、是否显示某元素）。  
- 子组件依赖父组件的**状态数据**（如计数器数值、开关状态），且不需要反向修改父组件数据。  
- 实现**组件复用**（通过 `@Prop` 接收不同参数，让子组件呈现不同效果）。

### 例子

##### 子组件（使用 `@Prop` 接收数据）

```
@Component
struct HelloComponent {
  // 这里使用 @State
  @Prop message: string = 'Hello, World!';

build() {
    // HelloComponent自定义组件组合系统组件Row和Text
    Row() {
      Text(this.message)
        .onClick(() => {
          // 状态变量message的改变驱动UI刷新，UI从'Hello, World!'刷新为'Hello, ArkUI!'
          this.message = 'Hello, ArkUI!';
        })
    }
  }
}
```

##### 父组件（调用子组件并传值）

```
@Entry
@Component
struct ParentComponent {
  build() {
    Column() {
      Text('ArkUI message')
      // 使用子组件时传值
      HelloComponent({ message: 'Hello World!' });
      Divider()
      HelloComponent({ message: '你好，世界!' });
    }
  }
}
```

HelloComponent可以在其他自定义组件中的 `build()` 函数中多次创建，实现自定义组件的重用。

### 关键特性
1. **数据流向严格单向**  
   - 父组件数据变化 → 子组件 `@Prop` 变量自动更新 → 子组件 UI 重新渲染。  
   - 子组件中直接修改 `@Prop` 变量（如 `this.message = "子组件修改"`）虽然语法允许，但**不会影响父组件**，且可能导致数据不一致，不推荐这样做。

2. **类型必须匹配**  
   父组件传递的值类型必须与子组件 `@Prop` 声明的类型一致（如 `@Prop count: number` 只能接收数字类型），否则会编译报错。

3. **支持默认值**  
   子组件中可以为 `@Prop` 变量设置默认值（如 `@Prop isActive: boolean = false`），此时父组件调用时可以不传递该参数，使用默认值。

4. **与 `@State` 配合使用**
   父组件通常需要用 `@State` 修饰传递给子组件的数据源（如示例中的 `parentMsg`），这样父组件修改数据时才能触发子组件的更新。如果父组件传递的是普通变量（非 `@State` 修饰），则父组件修改后子组件不会更新。

### 总结

`@Prop` 的核心价值是**实现父子组件间的单向数据同步**，确保父组件数据变化时子组件能自动响应，同时避免子组件随意修改父组件数据导致的状态混乱。它是 ArkTS 中构建组件树、实现数据传递的基础装饰器之一。

# 给子组件传值方式二

### 子组件

定义变量

```
@Component
struct MyComponent {
  private countDownFrom: number = 0;
  private color: Color = Color.Blue;

build() {
  }
}
```

### 父组件

使用子组件，并传值
```
@Entry
@Component
struct ParentComponent {
  private someColor: Color = Color.Pink;

build() {
    Column() {
      // 创建MyComponent实例，并将创建MyComponent成员变量countDownFrom初始化为10，将成员变量color初始化为this.someColor
      MyComponent({ countDownFrom: 10, color: this.someColor })
    }
  }
}
```

# 父组件中的函数传递给子组件

父组件
```
@Entry
@Component
struct Parent {
  @State cnt: number = 0
  submit: () => void = () => {
    this.cnt++;
  }

build() {
    Column() {
      Text(`${this.cnt}`)
      Son({ submitArrow: this.submit })
    }
  }
}
```

子组件：
```
@Component
struct Son {
  submitArrow?: () => void

build() {
    Row() {
      Button('add')
        .width(80)
        .onClick(() => {
          if (this.submitArrow) {
            this.submitArrow()
          }
        })
    }
    .justifyContent(FlexAlign.SpaceBetween)
    .height(56)
  }
}
```

原文出处：http://malaoshi.top/show_1GW1QWbsYtr.html