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

当应���中父子组件需要数据同步时，可以使用@Prop和@Link装饰器

（）

一个组件被引用时，引用其他组件的组件就是父组件、被引用的组件就是子组件。

由于@State装饰器无法执行父子之间的数据通信

（）

1. @Prop：单向同步、父组件中修改数据，会同步到子组件，但是子组件修改数据，父组件中不会同步，底层实现的是传递的父组件中的变量的拷贝。
2. @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() // 一旦更改任务，就需要重新渲染        })     }  }