介绍

官网指南

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

@Prop

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

核心作用

接收父组件传递的数据
子组件通过 @Prop 声明的变量，必须由父组件在调用时传入（除非设置默认值），形成“父传子”的单向数据流。
建立单向绑定关系
当父组件中传递给子组件的数据源发生变化时，子组件中 @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() 函数中多次创建，实现自定义组件的重用。

关键特性

数据流向严格单向
- 父组件数据变化 → 子组件 @Prop 变量自动更新 → 子组件 UI 重新渲染。
- 子组件中直接修改 @Prop 变量（如 this.message = "子组件修改"）虽然语法允许，但不会影响父组件，且可能导致数据不一致，不推荐这样做。
类型必须匹配
父组件传递的值类型必须与子组件 @Prop 声明的类型一致（如 @Prop count: number 只能接收数字类型），否则会编译报错。
支持默认值
子组件中可以为 @Prop 变量设置默认值（如 @Prop isActive: boolean = false），此时父组件调用时可以不传递该参数，使用默认值。
与 @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)
  }
}

原文出处：/show_1GW1QWbsYtr.html

介绍