app ui设计欣赏 网站营销策划公司名字大全

状态 @State：

在声明式UI中，以状态驱动视图更新

1. 状态（State）：指驱动视图更新的数据（被装饰器标记的变量）
2. 视图（View）：基于UI描述渲染得到的用户界面

使用示例：

@Entry
@Component
struct Index {// 使用状态装饰器@State message: string = 'Hello Word'build() {Column(){Text(this.message)}};
}

说明：

• @State装饰器标记的变量初始化必须有值
• @State支持Object、Class、string、number、boolean、enum类型以及这些类型的数组
• 嵌套类型以及数组中的对象属性无法触发视图更新（相当于浅层监听）

---

父子组件数据同步 @Prop和@Link：

对比：

	@Prop	@Link
同步类型	单向同步	双向同步
允许装饰的变量类型	@Prop只支持string、number、boolean、enum类型 父组件对象类型，子组件hi对象类型 不可以是数组，any	父子类型一致：string、number、boolean、enum、object、class以及他们的数组 数组中元素增、删、替换会引起刷新 嵌套类型以及数组中的对象属性无法触发视图更新
初始化方式	不允许子组件初始化	父子间传递，不允许子组件初始化

@Prop使用示例：

PS：@Prop定义的数据在子组件不能初始化

@Entry
@Component
struct Index {@State msg: string = 'Hello Word'build() {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 Word'build() {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 Word'build() {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 = 0@State 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: number@Link arr: ArrInt[]build(){Row(){List({space: 10}){ForEach(this.arr,(item: ArrInt) => {ListItem(){ArrItemModule({item:item, num: $num})}})}}}
}@Component
struct ArrItemModule {@ObjectLink item: ArrInt@Link 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})}}
}