学习鸿蒙基础（6）

一、@Prop属��� 父——>子 单向同步

@Prop装饰的变量可以和父组件建立单向的同步关系。@Prop装饰的变量是可变的，但是变化不会同步回其父组件。@Prop装饰的变量和父组件建立单向的同步关系。@Prop变量允许在本地修改，但修改后的变化不会同步回父组件。当父组件中的数据源更改时，与之相关的@Prop装饰的变量都会自动更新。如果子组件已经在本地修改了@Prop装饰的相关变量值，而在父组件中对应的@State装饰的变量被修改后，子组件本地修改的@Prop装饰的相关变量值将被覆盖。

注意:

@Prop变量装饰器允许装饰的变量类型只有：string、number、boolean、enum类型 

二、@Link属性  父——>子 双向同步

子组件中被@Link装饰的变量与其父组件中对应的数据源建立双向数据绑定@Link变量装饰器说明允许装饰的变量类型Object、class、string、number、boolean、enum类型，以及这些类型的数组。类型必须被指定，且和双向绑定状态变量的类型相同。不支持any，不支持简单类型和复杂类型的联合类型，不允许使用undefined和null。不支持Length、ResourceStr、ResourceColor类型，Length、ResourceStr、ResourceColor为简单类型和复杂类型的联合类型。

被装饰变量的初始值：无。

@Entry@Componentstruct PageLink {  @State message: string = 'Hello World'  @State isShow:boolean =false  build() {    Row() {      Column() {        nav({isShow:$isShow})        if(this.isShow){          textrr()        }      }      .height('100%')    }  }}@Componentstruct nav{  @Link isShow:boolean  build(){    Row(){      Button("show").onClick(v=>{          this.isShow=!this.isShow      }).margin(20)    }  }}@Componentstruct textrr{  build(){    Row(){      Text("你好").margin(60)    }  }}

三、嵌套类对象属性变化

@ObiectLink变量装饰器和@Observed类装饰器用于在涉及嵌套对象或数组的场景中进行双向数据同步。被@observed装饰的类，可以被观察到属性的变化。

子组件中@ObjectLink装饰器装饰的状态变量用于接收@Observed装饰的类的实例，和父组件中对应的状态变量建立双向数据绑定。这个实例可以是数组中的被@Observed装饰的项，或者是class obiect中的属性，这个属性同样也需要被@observed装饰。。单独使用@Observed是没有任何作用的，需要搭配@obiectLink或者@Prop使用

@Observed类装饰器：装饰class。需要放在class的定义前，使用new创建类对象

@ObiectLink变量装饰器：不与父组件中的任何类型同步变量。

允许装饰的变量类型：必须为被@Observed装饰的class实例，必须指定类型。不支持简单类型，可以使用@Prop。@ObiectLink的属性是可以改变的，但是变量的分配是不允许的，也就是说这个装。饰器装饰变量是只读的，不能被改变。

import myList from '../components/myListObserved'import Item from '../model/ItemFlag'@Entry@Componentstruct PageObserved {  @State text: string = ''  @State list: Item [] = [    new Item(Date.now(), "房子"),    new Item(Date.now(), "车子")  ]  build() {    Row() {      Column() {        Row(){          CheckboxGroup({group:"checkBoxGroup"})          Text("全选")          Button("删除").onClick(v=>{                this.list=this.list.filter(v=>!v.isChecked)          }).margin({left:"20"}).backgroundColor(Color.Red)        }.width("100%").margin({top:"10",left:'20'})        Row() {          TextInput({ text: this.text }).width(250).onChange((value) => {            this.text = value          })          Button("增加").onClick(() => {            this.list.push(new Item(Date.now(), this.text))            this.text = ""          }).margin(10)        }.width("100%").justifyContent(FlexAlign.SpaceBetween).margin(10)        List() {          ForEach(this.list, (item, index) => {            ListItem() {              myList({ item, index, list: this.list})            }.margin(10)          })        }.layoutWeight(1).pider({          strokeWidth: 1,          color: Color.Blue,          startMargin: 10,          endMargin: 10        })        .width('100%')      }    }    .height('100%')  }}

import Item from '../model/ItemFlag';//自定义组件  组件与组件之间是隔离的@Componentstruct myListObserved {  @ObjectLink item: Item;  private index: number;  private list: Item [];  build() {    Row() {      Checkbox({group:"checkBoxGroup"}).select(this.item.isChecked).onChange(v=>{        this.item.isChecked=v        console.log(JSON.stringify(this.item))      })      Text(this.item.text).fontSize(20).decoration(        {type:this.item.isChecked?TextDecorationType.Underline:TextDecorationType.None,          color:Color.Blue}      )      Button("删除").backgroundColor(Color.Red).onClick(() => {        this.list.splice(this.index, 1)      })    }.justifyContent(FlexAlign.SpaceBetween).width("100%")  }}export default myListObserved

@Observed class ItemFlag {  id: number;  text: string;  isChecked:boolean;  constructor(id: number, text: string,isChecked=false) {    this.id = id    this.text = text    this.isChecked=isChecked  }}export  default ItemFlag

四、与后代组件双向同步

@Provide和@Consume，应用于与后代组件的双向数据同步，应用于状态数据在多个层级之间传递的场景。不同于上文提到的父子组件之间通过命名参数机制传递，@Provide和@Consume摆脱参数传递机制的束缚，实现跨层级传递。

其中@Provide装饰的变量是在祖先节点中，可以理解为被”提供”给后代的状态变量。@Consume装饰的变量是在后代组件中，去”消费(绑定)”祖先节点提供的变量。

1.装饰器参数：别名:常量字符串，可选。如果指定了别名，则通过别名来绑定变量，如果未指定别名，则通过变量名绑定变量。

2.同步类型：双向同步。从@Provide变量到所有@Consume变量以及相反的方向的数据同步。双向同步的操作与@State和@Link的组合相同。

3.允许装饰的变量类：Object、class、string、number、boolean、enum类型，以及这些类型的数组。不支持any.不支持简单类型和复杂类型的联合类型，不允许使用undefined和null。必须指定类型@Provide变量的@Consume变量的类型必须相同。说明不支持Length、ResourceStr、ResourceColor类型，Length、ResourceStr、ResourceColor为简单类型和复杂类型的联合类。

@Entry@Componentstruct PageProvide {  @Provide('msg') message: string = 'Hello World'  build() {    Row() {      Column() {        Text("爷爷"+this.message)          .fontSize(50)          .fontWeight(FontWeight.Bold)        Fahter()      }      .width('100%')    }    .height('100%')  }}@Componentstruct Fahter{  @Consume message:string  build(){    Column(){        Text("爸爸"+this.message).fontSize(50)          .fontWeight(FontWeight.Bold)      Son()    }  }}@Componentstruct Son{  @Consume msg:string  message:string ="nn"  build(){    Column(){      Text("儿子"+this.msg).fontSize(50)        .fontWeight(FontWeight.Bold)      Button("gaibian").onClick(v=>{         this.msg="love world"      })    }  }}