HarmonyOS 鸿蒙Next 父组件传值给子组件

自定义了一个直播页面的组件A，进入这个页面后我在 aboutToAppear 方法中调用接口获取直播数据（对象），我在这个直播页面组件中写了一个播放器的子组件B，现在需要把接口获取的直播数据传递给播放器组件，应该怎么写，我用了 @State 和 @Link试了下，不行

sinazl 1楼•5 个月前

class ClassA {
  @Track public field: string;

  constructor(field: string) {
    this.field = field;
  }
}

@Component
@Entry
struct Index {
  @State a: ClassA = new ClassA("a123");
  @State b:string = "b123"


  build() {
    Row() {
      Column() {
        Text("parent" + this.a.field);
        BridgeComponent({ a: this.a });

        YourCustomComponent({status: this.b});

        Button("changeA").onClick(() => {
          this.a.field = "234"
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}


@Component
struct BridgeComponent {
  @Link @Watch("onClassAChange") a: ClassA;
  @Watch("onStatusChange") @State status: string = '';

  aboutToAppear(): void {
    this.status = this.a.field;
  }

  build() {
    Column() {
      YourCustomComponent({ status: this.status })
    }
  }
  onClassAChange() {
    this.status = this.a.field;
  }

  onStatusChange() {
    this.a.field = this.status;
  }
}

@Component
struct YourCustomComponent {
  @Link status: string;

  build() {
    Column() {
      Text(this.status)

      Button("CustomComponent1 change").onClick(() => {
        this.status = "3456"
      })
    }
  }
}
可以参考以上demo

更多关于HarmonyOS 鸿蒙Next 父组件传值给子组件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

zlyuanteng 2楼•5 个月前

子组件里定义一个[@Prop](/user/Prop)属性，父组件里定义一个[@State](/user/State)属性用于保存从接口获取的数据，父组件添加子组件时把[@State](/user/State)属性值赋值给子组件的[@Prop](/user/Prop)不就可以么？

ionicwang 3楼•5 个月前

在HarmonyOS鸿蒙系统中，父组件向子组件传值通常通过属性绑定（Property Binding）或事件机制（Event Mechanism）来实现。以下是基本的实现步骤：

定义数据：在父组件中定义需要传递给子组件的数据。
属性绑定：在父组件的模板中，使用属性绑定的方式将父组件的数据传递给子组件。这通常通过{{ }}（插值表达式）或直接绑定属性（例如[property]="value"）来完成。
接收数据：在子组件的元数据（如@Entry装饰的类）中，通过@Prop装饰器来接收父组件传递过来的数据。确保属性类型匹配，以避免类型错误。
使用数据：在子组件的模板或逻辑中，使用接收到的数据进行渲染或处理。

示例代码（简化）：

// 父组件
@Entry
@Component(struct: { template: '#parentTemplate' })
export default class Parent {
  @State dataToPass: string = 'Hello from Parent';
}
<template id="parentTemplate">
  <ChildComponent data="{{dataToPass}}"></ChildComponent>
</template>

// 子组件
@Entry
@Component
export default class ChildComponent {
  @Prop data: string;
}

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html