假如我们有两个组件 Index 和 Item，父组件 Index 中使用了子组件 Item。

@Entry
@Component
struct Index {
  build() {
    Item()
  }
}

@Component
struct Item {
  build() {
  }
}

那么它们两个如何通信呢？也就是 Index 中的数据如何传递给 Item 呢？

通过命名参数机制可以传递。

@Entry
@Component
struct Index {
  /**
   * 状态变量
   */
  @State message: string = "父组件信息"

  build() {
    Column() {
      Item({ message: this.message })
    }
    .width('100%')
  }
}

@Component
struct Item {
  @State message: string = "子组件信息"

  build() {
    Text(this.message)
  }
}

但有个问题：

编辑器报错：不允许将“@State”修饰的属性“message”分配给“@State”修饰的属性“message”。

把子组件 Item 中 message 属性前面的 @State 装饰器去掉就好了。

@Component
struct Item {
  message: string = "子组件中的消息"

  build() {
    Text(this.message)
  }
}

运行结果：

虽然运行结果没问题，但子组件中的写法有问题，既然 message 属性的值是通过父组件传递的，那干嘛还要自己初始化，可以去掉本地初始化的写法。

@Component
struct Item {
  message: string

  build() {
    Text(this.message)
  }
}

运行结果：

运行结果也没问题，这样写也可以。

还有一种写法，是官方推荐的写法。

@Prop 基本使用

使用 @Prop 来装饰那些需要父组件来初始化的数据。

例如，我们自组件 Item 中的 message 属性需要父组件来初始化，那么就在它前面写上 @Prop 装饰器：

@Component
struct Item {
  @Prop message: string

  build() {
    Text(this.message)
  }
}

运行结果：

从运行结果来看，是没有问题的。

限制条件

@Prop 装饰器不能在 @Entry 装饰的自定义组件中使用。也就是只能在子组件中使用。

@Entry
@Component
struct Index {
  /**
   * @Prop 不能在 @Entry 组件中使用
   */
  @Prop message: string

  build() {
    Column() {
      Text(this.message)
    }
    .width('100%')
  }
}

编辑器报错：

不能本地初始化

这里还需要注意一点的是，使用 @Prop 装饰器修饰的变量是不能本地初始化的。

@Prop message: string = "子组件中的消息"

编辑器报错：由“@Prop”、“@Link”、“@Consume”和“@ObjectLink”装饰的变量不能在本地初始化。

单向数据传递

子组件可以实时接收到父组件数据的变化，从而刷新自己的 UI。

例如，给父组件 Index 添加一个按钮，点击按钮改变 message 的值，然后观察子组件 UI 的变化：

@Entry
@Component
struct Index {
  /**
   * 状态变量
   */
  @State message: string = "父组件中的消息"

  build() {
    Column() {
      Item({ message: this.message })
      Button("按钮")
        .onClick(() => {
          this.message = "我是修改后的消息"
        })
    }
    .width('100%')
  }
}

运行结果：

从运行结果来看，修改父组件中 message 的值，子组件的UI立即刷新。

那么反过来，我们修改子组件中 message 的值，父组件的UI会不会刷新呢？

修改 Index、Item 组件中的代码：

@Entry
@Component
struct Index {
  /**
   * 状态变量
   */
  @State message: string = "父组件中的消息"

  build() {
    Column() {
      Text(`父组件：${this.message}`)
      Item({ message: this.message })
    }
    .width('100%')
  }
}

@Component
struct Item {
  @Prop message: string

  build() {
    Column() {
      Text(`子组件：${this.message}`)
      Button("按钮")
        .onClick(() => {
          this.message = "我是修改后的消息"
        })
    }
  }
}

运行结果：

从运行结果来看，修改子组件 message 的值，只有子组件 UI 刷新了，父组件 UI 没有任何变化。

说明 @Prop 装饰的变量和父组件建立单向的同步关系：

• @Prop 变量允许在本地修改，但修改后的变化不会同步回父组件。
• 当父组件中的数据源更改时，与之相关的 @Prop 装饰的变量都会自动更新。如果子组件已经在本地修改了 @Prop 装饰的相关变量值，而在父组件中对应的 @State 装饰的变量被修改后，子组件本地修改的 @Prop 装饰的相关变量值将被覆盖。

访问权限

@Prop 装饰的变量是私有的，只能在组件内访问。外部组件是访问不到的。

@Entry
@Component
struct Index {
  build() {
    Column() {
      Item()
    }
    .width('100%')
  }
}

@Component
struct Item {
  @Prop message: string

  build() {
    Column() {
      Text(this.message)
    }
  }
}