浅入@Param:组件外部输入
·
🎯 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装饰器的自定义组件中使用
🌸🌼🌺
更多推荐


所有评论(0)