HarmonyOS父子组件传递参数

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(this.list, (item: number, index) => {
          ListItem() {
            Text(item.toString())
              .width('100%')
              .padding(10)
              .backgroundColor(Color.White)

          }
        })
      }
    }.onClick(() => {
      this.list.push(this.list.length + 1)
    })
  }
}


// 父组件
@Entry
@Component
struct StateLink {
  @State list: number[] = [1, 2, 3]

  build() {
    Column() {
      ChildCom({
        // 注意,这里调用时,使用$替换this,这是语法规定
        list: $list
      })
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Gray)
  }
}

3. @Provide装饰器和@Consume装饰器：与后代组件双向同步

@Provide装饰器和@Consume装饰器：与后代组件双向同步

• 注意：@Consume装饰的变量通过相同的属性名绑定其祖先组件@Provide装饰的变量，在这里就是SunziCom中的@Consume listInfo: ListItemClass与祖先组件ProvideConsume中的@Provide listInfo: ListItemClass属性名保持一致。

// 这是模拟的数据
@Observed
class ListItemClass {
  name: string
  likeNum: number
  isLike: boolean
  comment: string

  constructor(name: string, likeNum: number, isLike: number, comment: string) {
    this.name = name
    this.likeNum = likeNum
    this.isLike = isLike === 0 ? false : true
    this.comment = comment
  }
}


// 这是 孙子组件
@Component
struct SunziCom {
  // 注意:这里的属性名要保持和 @Provide修饰的父组件属性名一致.
  @Consume listInfo: ListItemClass
  build() {
    Column() {
      Text(this.listInfo.name)
        .fontSize(18)
        .fontWeight(700)
        .fontColor('#333')
        .margin({
          bottom: 10
        })

      Row() {
        Text(this.listInfo.comment)

        Row() {
          Text(this.listInfo.likeNum.toString())
            .fontColor(this.listInfo.isLike ? Color.Red : '#333')
        }
        .onClick(() => {

          if (this.listInfo.isLike) {
            this.listInfo.likeNum -= 1
          } else {
            this.listInfo.likeNum += 1
          }
          this.listInfo.isLike = !this.listInfo.isLike
        })
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .width('100%')
    }
    .padding(10)
    .borderRadius(10)
    .alignItems(HorizontalAlign.Start)
    .width('100%')
    .backgroundColor(Color.White)
  }
}
// 这是 儿子组件
@Component
struct ErziCom {
  build() {
    SunziCom()
  }
}


@Entry
@Component
struct ProvideConsume {
  @Provide listInfo: ListItemClass = new ListItemClass(`小火车况且况且-${Math.ceil(Math.random() * 10)}`, Math.ceil(Math.random() * 100), Math.floor(Math.random() * 2), `这是随机的评论--${Math.ceil(Math.random() * 1000)}`)
  build() {
    Column(){
      ErziCom()
    }
  }
}

4. 使用@Observed装饰器和@ObjectLink装饰器：嵌套类对象属性变化，主要是可以处理Link遇上ForEach而导致一些奇怪的问题

@Observed装饰器和@ObjectLink装饰器：嵌套类对象属性变化

// 这是模拟的数据
@Observed
class ListItemClass {
  name: string
  likeNum: number
  isLike: boolean
  comment: string

  constructor(name: string, likeNum: number, isLike: number, comment: string) {
    this.name = name
    this.likeNum = likeNum
    this.isLike = isLike === 0 ? false : true
    this.comment = comment
  }
}

function createData() {
  return [
    new ListItemClass(`小火车况且况且-${Math.ceil(Math.random() * 10)}`, Math.ceil(Math.random() * 100), Math.floor(Math.random() * 2), `这是随机的评论--${Math.ceil(Math.random() * 1000)}`),
    new ListItemClass(`小火车况且况且-${Math.ceil(Math.random() * 10)}`, Math.ceil(Math.random() * 100), Math.floor(Math.random() * 2), `这是随机的评论--${Math.ceil(Math.random() * 1000)}`),
    new ListItemClass(`小火车况且况且-${Math.ceil(Math.random() * 10)}`, Math.ceil(Math.random() * 100), Math.floor(Math.random() * 2), `这是随机的评论--${Math.ceil(Math.random() * 1000)}`),
    new ListItemClass(`小火车况且况且-${Math.ceil(Math.random() * 10)}`, Math.ceil(Math.random() * 100), Math.floor(Math.random() * 2), `这是随机的评论--${Math.ceil(Math.random() * 1000)}`)
  ]
}


// 子组件
@Component
struct ChildCom {
  @ObjectLink listInfo: ListItemClass

  build() {

    Column() {
      Text(this.listInfo.name)
        .fontSize(18)
        .fontWeight(700)
        .fontColor('#333')
        .margin({
          bottom: 10
        })

      Row() {
        Text(this.listInfo.comment)

        Row() {
          Text(this.listInfo.likeNum.toString())
            .fontColor(this.listInfo.isLike ? Color.Red : '#333')
        }
        .onClick(() => {

          if (this.listInfo.isLike) {
            this.listInfo.likeNum -= 1
          } else {
            this.listInfo.likeNum += 1
          }
          this.listInfo.isLike = !this.listInfo.isLike
        })
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .width('100%')
    }
    .padding(10)
    .borderRadius(10)
    .alignItems(HorizontalAlign.Start)
    .width('100%')
    .backgroundColor(Color.White)
  }
}


// 父组件
@Entry
@Component
struct ObservedObjectLink {
  @State list: ListItemClass[] = createData()

  build() {
    Column() {
      List({
        space: 10
      }) {
        ForEach(this.list, (item: ListItemClass, index: number) => {
          ListItem() {
            ChildCom({
              listInfo: item
            })
          }
        })
      }
    }
    .padding(10)
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Gray)
  }
}