帮助中心网站怎么做,中建西部建设广通讯网站,简述建站流程,南阳专业网站建设价格文章目录 一、哪些是状态装饰器二、StatePropLink状态传递的核心规则三、状态装饰器练习 一、哪些是状态装饰器
1、State#xff1a;被装饰拥有其所属组件的状态#xff0c;可以作为其子组件单向和双向同步的数据源。当其数值改变时#xff0c;会引起相关组件的渲染刷新。 … 文章目录 一、哪些是状态装饰器二、StatePropLink状态传递的核心规则三、状态装饰器练习 一、哪些是状态装饰器
1、State被装饰拥有其所属组件的状态可以作为其子组件单向和双向同步的数据源。当其数值改变时会引起相关组件的渲染刷新。
2、Prop被装饰可以和父组件建立单向同步关系Prop装饰的变量是可变的但修改不会同步回父组件。
3、Link被装饰变量和父组件构建双向同步关系的状态变量父组件会接受来子Link装饰的变量的修改的同步父组件的更新也会同步给Link装饰的变量。
4、Provide/ConsumeProvide/Consume装饰的变量用于跨组件层级多层组件同步状态变量可以不需要通过参数命名机制传递通过alias别名或者属性名绑定。
5、ObservedObserved装饰class需要观察多层嵌套场景的class需要被Observed装饰。单独使用Observed没有任何作用需要和ObjectLink、Prop连用。
6、ObjectLinkObjectLink装饰的变量接收Observed装饰的class的实例应用于观察多层嵌套场景和父组件的数据源构建双向同步。
二、StatePropLink状态传递的核心规则
1单向传递State-----Prop2双向传递State-----Link3使用build()函数进行驱动更新4传参State-----Prop( this. 变量名)5传参State-----Link($变量名)
三、状态装饰器练习
1、提醒练习中的注释很详细
2、练习代码
Entry
Component
struct Index {State name: string 清风build() {Row() {Column() {Text(this.name).Index_text()//State切换Button(State父变).Index_button(Color.Blue, (){this.name this.name 清风 ? 明月 : 清风})// .onClick((){// //清风、明月之间切换如果是清风就切换为明月如果是明月就切换为清风// this.name this.name 清风 ? 明月 : 清风// })Divider()//调用自定义组件将父组件Index中的变State修饰的变量传递给子组件itemCom_prop中//当父组件状态值发生变化时子组件的值也会相应发生变化itemCom_prop({content_prop:this.name})Divider()//调用Link变量的组件不能直接传入this.name需要使用$修饰即$nameitemCom_Link({content_link:$name})}.width(100%)}.height(100%)}
}//创建一个自定义组件添加一个用Prop装饰的状态数据方便父子组件之间进行数据传递和同步单向
Component
struct itemCom_prop{//不加private默认也是私有变量若赋值了则表示参数缺省值//content:string 默认值//使用Prop进行修饰的变量不能进行初始化数值反之State进行修饰的变量必须进行初始化数值Prop content_prop:string;build(){Column(){Text(this.content_prop).Index_text()//加上一个子组件验证当子组件的变量发生变化时与父组件绑定的值是否也会相应发生变化Button(Prop子变).Index_button(Color.Gray, (){this.content_prop 不同心儿子变了})// .colorBlend(Color.Green)// .onClick((){// //无法多次修改子组件下的变量值// //this.content_prop this.content_prop ? 明月 : 清风// //因此修改子组件下的变量为一个特定值// this.content_prop 我成长发生了变化// //经过验证得出State到Prop为单向传递值StateProp// })}}
}//添加一个用Prop装饰的状态数据方便父子组件之间进行数据传递和同步双向
Component
struct itemCom_Link{//Link修饰的变量也不能赋初始化的值Link content_link:stringbuild(){Column(){Text(this.content_link).Index_text()Button(同心儿子也变了).Index_button(Color.Red, (){this.content_link 同心儿子变了})}}
}//封装样式函数方便后面敲写Link时可以直接调用注意需要将名字不要与其他ets文件中的组件重合
//由于不是公共样式属性因此不用Styles而是使用Extend
Extend(Text) function Index_text(){.fontSize(50).fontWeight(FontWeight.Bold).fontStyle(FontStyle.Italic)
}
//给Button组件样式中传递函数参数
Extend(Button) function Index_button(cl:number|string,click:Function){.colorBlend(cl).onClick((){click()})
}3、测试效果
