自用网站开发费用会计分录,无极县城内招聘临时工,怎么查网站是哪个公司做的,知名网站开发语言状态 State#xff1a;
在声明式UI中#xff0c;以状态驱动视图更新
状态#xff08;State#xff09;#xff1a;指驱动视图更新的数据#xff08;被装饰器标记的变量#xff09;视图#xff08;View#xff09;#xff1a;基于UI描述渲染得到的用户界面
使用示例…状态 State
在声明式UI中以状态驱动视图更新
状态State指驱动视图更新的数据被装饰器标记的变量视图View基于UI描述渲染得到的用户界面
使用示例
Entry
Component
struct Index {// 使用状态装饰器State message: string Hello Wordbuild() {Column(){Text(this.message)}};
}
说明
State装饰器标记的变量初始化必须有值State支持Object、Class、string、number、boolean、enum类型以及这些类型的数组嵌套类型以及数组中的对象属性无法触发视图更新相当于浅层监听 父子组件数据同步 Prop和Link
对比
PropLink同步类型单向同步双向同步允许装饰的变量类型 Prop只支持string、number、boolean、enum类型父组件对象类型子组件hi对象类型不可以是数组any 父子类型一致string、number、boolean、enum、object、class以及他们的数组数组中元素增、删、替换会引起刷新嵌套类型以及数组中的对象属性无法触发视图更新初始化方式不允许子组件初始化父子间传递不允许子组件初始化
Prop使用示例
PSProp定义的数据在子组件不能初始化
Entry
Component
struct Index {State msg: string Hello Wordbuild() {Column() {MsgModule({msg:this.msg})Button(更改文案).onClick((){this.msg Hello arkTs})}}
}Component
struct MsgModule {Prop msg:stringbuild(){Text(this.msg).fontSize(30).fontColor(red)}
}
Link使用示例
PS
Link定义的数据在子组件不能初始化Link定义的数据父组件在使用时候去掉this.且前边加$符号
Entry
Component
struct Index {State msg: string Hello Wordbuild() {Column() {MsgModule({msg: $msg})}}
}Component
struct MsgModule {Link msg:stringbuild(){Row(){Text(this.msg).fontSize(30).fontColor(red)Button(更改文案).onClick((){this.msg Hello arkTs})}}
} Provide和Consume跨组件提供双向的数据同步 Provide定义的数组其他组件在使用时候直接使用Consume定义使用不需要在调用组件时候进行参数传递
使用示例
Entry
Component
struct Index {Provide msg: string Hello Wordbuild() {Column() {MsgBtnModule()}}
}Component
struct MsgBtnModule {build(){Row(){MsgModule()}}
}Component
struct MsgModule {Consume msg: stringbuild(){Row(){Text(this.msg).fontSize(30).fontColor(red)Button(更改文案).onClick((){this.msg Hello arkTs})}}
} ObjectLink和Observed涉及嵌套对象或数组元素为对象的场景中进行双向数据同步
使用示例
Observed
class ArrInt {name: string price: number 0
}Entry
Component
struct Index {State num:number 0State arr: ArrInt[] [{name: 华为 Meta 50,price: 7999},{name: 华为 Meta 60,price: 8999},{name: 华为 Meta 60 pro,price: 9999},]build() {Column() {Text(涨价 this.num.toString() 次).fontSize(50).margin(20)ArrModule({num: $num, arr: $arr})}}
}Component
struct ArrModule {Link num: numberLink arr: ArrInt[]build(){Row(){List({space: 10}){ForEach(this.arr,(item: ArrInt) {ListItem(){ArrItemModule({item:item, num: $num})}})}}}
}Component
struct ArrItemModule {ObjectLink item: ArrIntLink num: numberbuild(){Column(){Text(this.item.name).fontSize(30).fontColor(red)Text(this.item.price.toString()).fontSize(30).fontColor(#000)Button(涨价).onClick((){this.num 1})}}
}
