HarmonyOS父子组件传递参数

小火车况且况且

已于 2024-06-21 14:07:42 修改

阅读量2.1k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： HarmonyOS 文章标签： harmonyos pytorch 深度学习

于 2024-06-21 10:44:55 首次发布

本文链接：https://blog.csdn.net/weixin_43972992/article/details/139837754

HarmonyOS父子组件传递参数

1. 使用`@State`和`@Prop`进行父子组件传递———注意是单向同步

@Prop装饰器：父子单向同步

注意：只支持单向同步，同时也只能支持string\number\boolean\enum比较简单的类型。

代码

// 使用 props 进行父子组件传值
@Component
struct SonCom {
   
   
  // 父子间传递过来的数据使用 @Prop 进行接受
  @Prop sonCar: string
  // 修改传递的参数
  changeInfo = (info: string)=> {
   
   }
  build() {
   
   
    Column() {
   
   
      Text(`这是子组件的盒子--- ${
     
     this.sonCar}`)

      Button('子组件修改父组件的数据').onClick((event: ClickEvent) => {
   
   
        this.changeInfo('吉利银河 L7 ----' + Math.ceil(Math.random() * 10))
      })
    }
    .width('100%')
    .height(100)
    .backgroundColor(Color.Orange)
  }
}


@Entry
@Component
struct PropsPage {
   
   
  @State info: string = '比亚迪 宋'

  changeInfo = (newInfo: string)=>{
   
   
    this.info = newInfo
  }

  build() {
   
   
    Column({
    
    space: 20}) {
   
   
      Text(`这是父组件的盒子 ${
     
     this.info}`)

      Button('修改父组件的数据').onClick((event: ClickEvent) => {
   
   
        this.info = '领克 08---' + Math.ceil(Math.random() * 10)
      })
      // 这是子组件
      SonCom({
   
   
        sonCar: this.info,
        changeInfo: this.changeInfo
      })
    }
    .width('100%')
    .height(300)
    .backgroundColor(Color.Pink)
  }
}

演示
在这里插入图片描述

2. @Link装饰器：父子双向同步

@Link装饰器：父子双向同步

注意

// 子组件
@Component
struct ChildCom {
   
   
  @Link list: number[]

  build() {
   
   
    Column() {
   
   

      List({
   
   space: 10}) {
   
   
        ForEach