HarmonyOS --@Prop和@Link同步信息装饰器

当应用中父子组件需要数据同步时，可以使用@Prop和@Link装饰器
一个组件被引用时，引用其他组件的组件就是父组件、被引用的组件就是子组件。
由于@State装饰器无法执行父子之间的数据通信

@Prop：单向同步、父组件中修改数据，会同步到子组件，但是子组件修改数据，父组件中不会同步，底层实现的是传递的父组件中的变量的拷贝。
@Link：双向同步、修改父子组件中的数据，修改会同步到父子组件中，底层实现的是传递的父子组件中的变量的引用。

Prop单向传递

语法：将一个显示任务数量和完成情况的卡片组件进行封装

@Component  
struct TaskStatic {  @Prop finishTask: number  // Prop变量不需要初始化@Prop totalTask: number  build() {  // ===任务数量显示卡片st===//  Row() {  Text('任务进度：') // 任务进度文字  .whiteFont()  .fontSize(30)  .fontWeight(FontWeight.Bold)  Stack() { // 叠加容器，容器内组件依次入栈，后一个组件覆盖前一个组件  // ===进度条st===//            Progress({ value: this.finishTask, total: this.totalTask, type: ProgressType.Ring })  .width(100)  // ===进度条end===//  Row() { // 两个文本，一个显示完成任务数量，一个显示总的任务数量  Text(this.finishTask.toString()) // 完成任务  .fontSize(24)  .fontColor('#76D')  Text(`/` + this.totalTask.toString()) // 所有任务  .fontSize(24)  .whiteFont()  }         }  }  .card()  .justifyContent(FlexAlign.SpaceEvenly)  // ===任务数量显示卡片end===//  }  
}

入口代码：

@Entry  
@Component  
struct PropPage {  // 总的任务量  @State totalTask: number = 0  // 完成的任务  @State finishTask: number = 0  build() {  Column() {  // 标题栏st//  Header({ title: '任务统计案例' })  // 任务展示卡片组件  prop单向同步显示//  TaskStatic({ finishTask: this.finishTask, totalTask: this.totalTask })  // 任务列表组件//  
TaskList({finishTask:$finishTask,totalTask:$totalTask})  }      .width('100%') // Column宽度  .height('100%') // Column高度  .backgroundColor('#F1F2F3')  }  
}

Link变量初始化

语法：

@Component  
struct TaskList {  @Link finishTask: number  // Link变量也不需要初始化@Link totalTask: number  //任务数组  @State tasks: Task[] = []  handleTaskChange() {  this.totalTask = this.tasks.length // 所有的任务  // 遍历数组，过滤出已经完成的任务数量      this.finishTask = this.tasks.filter(item => item.finished).length  }  build() { // 子元素中必须只有一个根元素  Column() {  // ==新增任务按钮st==//  Button('新增任务')  .onClick(() => {  // 1. 新增任务进入数组  this.tasks.push(new Task())  // 2. 改变任务总数  this.handleTaskChange()  })  .width(100)  .height(40)  .type(ButtonType.Normal)  .borderRadius(15)  .margin(10)  // 新增任按钮end//  // 渲染列表st//         List({ space: 10 }) {  ForEach(this.tasks, (item: Task, index) => {  ListItem() {  Row() {  Text(`新增任务${index}`)  .fontSize(24)  .whiteFont()  Checkbox({ name: 'checkbox' + index.toString() })  .select(item.finished)  .selectedColor(0xed6f21)  .onChange((value: boolean) => {  item.finished = value  this.handleTaskChange()  })  }  .card()  .justifyContent(FlexAlign.SpaceBetween)  .margin(6)  }  .swipeAction({ end: this.deleteButton(index) }) // 列表的右滑功能函数  })  }         .width('100%')  .layoutWeight(1) // 将剩下的空间全部给list元素  .alignListItem(ListItemAlign.Center) // 列表元素居中  // =渲染列表end=//      }  }  @Builder deleteButton(index: number) { // 删除按钮构建函数  Button() {  Image($r('app.media.delete'))  .width(40)  .padding(5)  }      .width(60)  .type(ButtonType.Circle)  .backgroundColor(Color.Brown)  .onClick(() => {  this.tasks.splice(index, 1) // 删除1个  this.handleTaskChange() // 一旦更改任务，就需要重新渲染  })  }  
}

TaskList({finishTask:$finishTask,totalTask:$totalTask})}

传值的时候需要传变量的引用：$+变量名

总结

父组件影响子组件用Prop，父子组件相互影响需要用Link，互不影响使用State

其次，允许装饰的变量类型也不一样，Prop只支持string、number、boolean、enum类型，父组件对象类型，子组件是对象属性。不可以是数组、any类型。

而Link，父子类型一致，string、number、boolean、enum、object、class，以及他们的数组。数组中元素增删、替换都会引起刷新。嵌套类型以及数组中的对象属性无法触发视图更新。

初始化方式上看，Prop不允许子组件初始化，Link由父组件传递，禁止子组件初始化。

也提供了另一种传递方式，@Provide 和@Consume，不需要初始化和传值。

import router from '@ohos.router'  
import { Header } from '../components/herder'  
// 创建Task类  
class Task {  static id: number = 1  name: string = `任务${Task.id++}`  finished: boolean = false  
}  // 创建单独的卡片样式  
@Styles function card() {  .width('95%')  // .height(20)  .padding(20)  .backgroundColor(Color.Brown)  .borderRadius(15)  .shadow({ radius: 6, color: '#1F000000', offsetX: 2, offsetY: 4 })  
}  // 任务完成样式  
@Extend(Text) function finishedCard() {  .decoration({ type: TextDecorationType.LineThrough })  .fontColor('#B1B2B1')  
}  // 任务白色字体  
@Extend(Text) function whiteFont() {  .fontColor(Color.White)  
}  @Entry  
@Component  
struct PropPage {  // 总的任务量  @Provide totalTask: number = 0  // 完成的任务  @Provide finishTask: number = 0  build() {  Column() {  // =======================标题栏st======================//  Header({ title: '任务统计案例' })  // =======================任务展示卡片组件======================//  TaskStatic()  // =======================任务列表组件======================//  TaskList()  }      .width('100%') // Column宽度  .height('100%') // Column高度  .backgroundColor('#F1F2F3')  }  
}  @Component  
struct TaskStatic {  @Consume finishTask: number  @Consume totalTask: number  build() {  // =======================任务数量显示卡片st======================//  Row() {  Text('任务进度：') // 任务进度文字  .whiteFont()  .fontSize(30)  .fontWeight(FontWeight.Bold)  Stack() { // 叠加容器，容器内组件依次入栈，后一个组件覆盖前一个组件  // =======================进度条st======================//            Progress({ value: this.finishTask, total: this.totalTask, type: ProgressType.Ring })  .width(100)  // =======================进度条end======================//  Row() { // 两个文本，一个显示完成任务数量，一个显示总的任务数量  Text(this.finishTask.toString()) // 完成任务  .fontSize(24)  .fontColor('#76D')  Text(`/` + this.totalTask.toString()) // 所有任务  .fontSize(24)  .whiteFont()  }         }  }  .card()  .justifyContent(FlexAlign.SpaceEvenly)  // =======================任务数量显示卡片end======================//  }  
}  @Component  
struct TaskList {  @Consume finishTask: number  @Consume totalTask: number  //任务数组  @State tasks: Task[] = []  handleTaskChange() {  this.totalTask = this.tasks.length // 所有的任务  // 遍历数组，过滤出已经完成的任务数量      this.finishTask = this.tasks.filter(item => item.finished).length  }  build() { // 子元素中必须只有一个根元素  Column() {  // =======================新增任务按钮st======================//  Button('新增任务')  .onClick(() => {  // 1. 新增任务进入数组  this.tasks.push(new Task())  // 2. 改变任务总数  this.handleTaskChange()  })  .width(100)  .height(40)  .type(ButtonType.Normal)  .borderRadius(15)  .margin(10)  // =======================新增任按钮end======================//  // =======================渲染列表st======================//         List({ space: 10 }) {  ForEach(this.tasks, (item: Task, index) => {  ListItem() {  Row() {  Text(`新增任务${index}`)  .fontSize(24)  .whiteFont()  Checkbox({ name: 'checkbox' + index.toString() })  .select(item.finished)  .selectedColor(0xed6f21)  .onChange((value: boolean) => {  item.finished = value  this.handleTaskChange()  })  }  .card()  .justifyContent(FlexAlign.SpaceBetween)  .margin(6)  }  .swipeAction({ end: this.deleteButton(index) }) // 列表的右滑功能函数  })  }         .width('100%')  .layoutWeight(1) // 将剩下的空间全部给list元素  .alignListItem(ListItemAlign.Center) // 列表元素居中  // =======================渲染列表end======================//      }  }  @Builder deleteButton(index: number) { // 删除按钮构建函数  Button() {  Image($r('app.media.delete'))  .width(40)  .padding(5)  }      .width(60)  .type(ButtonType.Circle)  .backgroundColor(Color.Brown)  .onClick(() => {  this.tasks.splice(index, 1) // 删除1个  this.handleTaskChange() // 一旦更改任务，就需要重新渲染  })  }  
}