🎯 V2: 浅入@Param:组件外部输入

📌 见解

1️⃣ 可以在本地初始化但是不能直接修改

2️⃣ 支持本地和从父组件传值初始化,两者同时存优先使用夫组件的值

⚠️ 使用场景:

从父组件到子组件变量与同步、装饰Date类型变量、Map类型变量、Set类型变量、联合类型

🧩 拆解

/** 基础类型*/
@ObservedV2
class CaseModelOne {
  @Trace str1: string = 'CaseModelSix_原始'
}

/** Map类型*/
@ObservedV2
class CaseModelTwo {
  @Trace caseModelFiveMap: Map<number, string> = new Map([[0, "a"], [1, "b"], [3, "c"]])
}

/** Set类型*/
@ObservedV2
class CaseModelThree {
  @Trace caseModelSixSet: Set<string> = new Set(['0', '1', '2', '3'])
}

/** Date类型*/
@ObservedV2
class CaseModelFour {
  @Trace CaseModelSevenDate: Date = new Date('2021-08-08')
}



@Entry
@ComponentV2
struct ParamCase {
  @Local caseModelOne: CaseModelOne = new CaseModelOne()
  @Local caseModelTwo: CaseModelTwo = new CaseModelTwo()
  @Local caseModelThree: CaseModelThree = new CaseModelThree()
  @Local caseModelFour: CaseModelFour = new CaseModelFour()

  build() {
    Column() {
        ParamCaseSon({
          caseModelOne: this.caseModelOne,
          caseModelTwo: this.caseModelTwo,
          caseModelThree: this.caseModelThree,
          caseModelFour: this.caseModelFour,
        })

      Button("change")
        .onClick(() => {
          this.caseModelOne.str1 = 'caseModelOne_更新'
          this.caseModelTwo.caseModelFiveMap.set(0,'更新')
          this.caseModelThree.caseModelSixSet = new Set(['更新'])
          this.caseModelFour.CaseModelSevenDate = new Date('2021-2-22')
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

/**
 * 自组件,Require标识,必传参数
 */
@ComponentV2
struct ParamCaseSon {
  @Require @Param caseModelOne: CaseModelOne
  @Require @Param caseModelTwo: CaseModelTwo
  @Require @Param caseModelThree: CaseModelThree
  @Require @Param caseModelFour: CaseModelFour
  build() {
    Column() {
      Text(this.caseModelOne.str1)
      Text(this.caseModelTwo.caseModelFiveMap.get(0))
      Text(`${this.caseModelThree.caseModelSixSet}`)
      Text(`${this.caseModelFour.CaseModelSevenDate}`)
    }
  }
}

📝 @Param装饰器只能在@ComponentV2装饰器的自定义组件中使用

🌸🌼🌺

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐