HarmonyOS鸿蒙Next中Resource类型的数据如何在父子组件间传参

HarmonyOS鸿蒙Next中Resource类型的数据如何在父子组件间传参

使用state声明，@Link使用报错，应该怎么用？

例如想要把图片地址$（’app.media.tomato’）传给子组件

3 回复

开发者您好，子组件使用@Link修饰时，父组件传值需要添加$。参考代码如下：

@Component
struct FoodImageDisplay {
  @Link imageSrc: Resource

  build() {
    Stack({ alignContent: Alignment.BottomStart }) {
      Image(this.imageSrc)
        .objectFit(ImageFit.Contain)
      Text('Tomato')
        .fontSize(26)
        .fontWeight(500)
        .margin({ left: 26, bottom: 17.4 })
    }
    .backgroundColor('#FFedf2f5')
    .height(357)
  }
}

@Entry
@Component
struct FoodDetail {

  @State imageSrc: Resource = $r('app.media.Tomato')

  build() {
    Column() {
      FoodImageDisplay({imageSrc:$imageSrc})
    }
    .alignItems(HorizontalAlign.Center)
  }
}

更多关于HarmonyOS鸿蒙Next中Resource类型的数据如何在父子组件间传参的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，Resource类型的数据可以通过[@State](/user/State)、[@Prop](/user/Prop)、[@Link](/user/Link)等装饰器在父子组件间传递。[@State](/user/State)用于组件内部状态管理，[@Prop](/user/Prop)用于父组件向子组件传递数据，[@Link](/user/Link)用于父子组件双向绑定。例如，父组件定义[@State](/user/State)变量并传递给子组件的[@Prop](/user/Prop)或[@Link](/user/Link)变量，子组件即可访问或修改该Resource数据。具体实现如下：

  1. 父组件定义[@State](/user/State)变量：

    [@State](/user/State) resourceData: Resource = $r('app.string.example');

  2. 子组件通过[@Prop](/user/Prop)接收数据：

    [@Prop](/user/Prop) resourceProp: Resource;

  3. 子组件通过[@Link](/user/Link)实现双向绑定：

    [@Link](/user/Link) resourceLink: Resource;

  4. 父组件传递数据给子组件：

    ChildComponent({ resourceProp: this.resourceData, resourceLink: $resourceLink })

通过以上方式，Resource类型的数据可以在父子组件间传递。

在HarmonyOS鸿蒙Next中，Resource类型的数据可以通过@State、@Prop、@Link等装饰器在父子组件间传递。例如，父组件使用@State定义Resource数据，子组件通过@Prop或@Link接收。@Prop用于单向传递，子组件不能修改父组件的数据；@Link用于双向绑定，子组件可以修改父组件的数据。确保Resource数据的类型一致，避免类型不匹配导致的错误。

回到顶部