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

# 介绍

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

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

# 例子

子组件：

```
@Component
struct HelloComponent {
  @State 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()` 函数中多次创建，实现自定义组件的重用。

# 给子组件传值

```
@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