devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：菜鸟追梦旅行 | 2024-03-22 15:01:37

赞

踩

harmonyos @prop

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

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

Prop单向传递

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

  1. @Component  
  2. struct TaskStatic {  
  3.    @Prop finishTask: number  // Prop变量不需要初始化
  4.    @Prop totalTask: number  
  5.   
  6.    build() {  
  7.       // ===任务数量显示卡片st===//  
  8.       Row() {  
  9.          Text('任务进度：') // 任务进度文字  
  10.             .whiteFont()  
  11.             .fontSize(30)  
  12.             .fontWeight(FontWeight.Bold)  
  13.   
  14.          Stack() { // 叠加容器，容器内组件依次入栈，后一个组件覆盖前一个组件  
  15.             // ===进度条st===//            
  16.             Progress({ value: this.finishTask, total: this.totalTask, type: ProgressType.Ring })  
  17.                .width(100)  
  18.             // ===进度条end===//  
  19.             Row() { // 两个文本，一个显示完成任务数量，一个显示总的任务数量  
  20.                Text(this.finishTask.toString()) // 完成任务  
  21.                   .fontSize(24)  
  22.                   .fontColor('#76D')  
  23.                Text(`/` + this.totalTask.toString()) // 所有任务  
  24.                   .fontSize(24)  
  25.                   .whiteFont()  
  26.             }         
  27. 		}  
  28.       }  
  29.       .card()  
  30.       .justifyContent(FlexAlign.SpaceEvenly)  
  31.       // ===任务数量显示卡片end===//  
  32.    }  
  33. }

入口代码：

  1. @Entry  
  2. @Component  
  3. struct PropPage {  
  4.    // 总的任务量  
  5.    @State totalTask: number = 0  
  6.    // 完成的任务  
  7.    @State finishTask: number = 0  
  8.   
  9.    build() {  
  10.       Column() {  
  11.          // 标题栏st//  
  12.          Header({ title: '任务统计案例' })  
  13.          // 任务展示卡片组件  prop单向同步显示//  
  14.          TaskStatic({ finishTask: this.finishTask, totalTask: this.totalTask })  
  15.          // 任务列表组件//  
  16. TaskList({finishTask:$finishTask,totalTask:$totalTask})  
  17.       }      
  18.       .width('100%') // Column宽度  
  19.       .height('100%') // Column高度  
  20.       .backgroundColor('#F1F2F3')  
  21.    }  
  22. }

Link变量初始化

语法：

  1. @Component  
  2. struct TaskList {  
  3.    @Link finishTask: number  // Link变量也不需要初始化
  4.    @Link totalTask: number  
  5.    //任务数组  
  6.    @State tasks: Task[] = []  
  7.   
  8.    handleTaskChange() {  
  9.       this.totalTask = this.tasks.length // 所有的任务  
  10.       // 遍历数组，过滤出已经完成的任务数量      this.finishTask = this.tasks.filter(item => item.finished).length  
  11.    }  
  12.   
  13.    build() { // 子元素中必须只有一个根元素  
  14.       Column() {  
  15.          // ==新增任务按钮st==//  
  16.          Button('新增任务')  
  17.             .onClick(() => {  
  18.                // 1. 新增任务进入数组  
  19.                this.tasks.push(new Task())  
  20.                // 2. 改变任务总数  
  21.                this.handleTaskChange()  
  22.             })  
  23.             .width(100)  
  24.             .height(40)  
  25.             .type(ButtonType.Normal)  
  26.             .borderRadius(15)  
  27.             .margin(10)  
  28.          // 新增任按钮end//  
  29.   
  30.          // 渲染列表st//         
  31.          List({ space: 10 }) {  
  32.             ForEach(this.tasks, (item: Task, index) => {  
  33.                ListItem() {  
  34.                   Row() {  
  35.                      Text(`新增任务${index}`)  
  36.                         .fontSize(24)  
  37.                         .whiteFont()  
  38.                      Checkbox({ name: 'checkbox' + index.toString() })  
  39.                         .select(item.finished)  
  40.                         .selectedColor(0xed6f21)  
  41.                         .onChange((value: boolean) => {  
  42.                            item.finished = value  
  43.                            this.handleTaskChange()  
  44.                         })  
  45.                   }  
  46.                   .card()  
  47.                   .justifyContent(FlexAlign.SpaceBetween)  
  48.                   .margin(6)  
  49.                }  
  50.                .swipeAction({ end: this.deleteButton(index) }) // 列表的右滑功能函数  
  51.             })  
  52.          }         .width('100%')  
  53.          .layoutWeight(1) // 将剩下的空间全部给list元素  
  54.          .alignListItem(ListItemAlign.Center) // 列表元素居中  
  55.          // =渲染列表end=//      
  56.          }  
  57.    }  
  58.   
  59.    @Builder deleteButton(index: number) { // 删除按钮构建函数  
  60.       Button() {  
  61.          Image($r('app.media.delete'))  
  62.             .width(40)  
  63.             .padding(5)  
  64.       }      .width(60)  
  65.       .type(ButtonType.Circle)  
  66.       .backgroundColor(Color.Brown)  
  67.       .onClick(() => {  
  68.          this.tasks.splice(index, 1) // 删除1个  
  69.          this.handleTaskChange() // 一旦更改任务，就需要重新渲染  
  70.       })  
  71.    }  
  72. }
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，不需要初始化和传值。

  1. import router from '@ohos.router'  
  2. import { Header } from '../components/herder'  
  3. // 创建Task类  
  4. class Task {  
  5.    static id: number = 1  
  6.    name: string = `任务${Task.id++}`  
  7.    finished: boolean = false  
  8. }  
  9.   
  10. // 创建单独的卡片样式  
  11. @Styles function card() {  
  12.    .width('95%')  
  13.    // .height(20)  
  14.    .padding(20)  
  15.    .backgroundColor(Color.Brown)  
  16.    .borderRadius(15)  
  17.    .shadow({ radius: 6, color: '#1F000000', offsetX: 2, offsetY: 4 })  
  18. }  
  19.   
  20. // 任务完成样式  
  21. @Extend(Text) function finishedCard() {  
  22.    .decoration({ type: TextDecorationType.LineThrough })  
  23.    .fontColor('#B1B2B1')  
  24. }  
  25.   
  26. // 任务白色字体  
  27. @Extend(Text) function whiteFont() {  
  28.    .fontColor(Color.White)  
  29. }  
  30.   
  31. @Entry  
  32. @Component  
  33. struct PropPage {  
  34.    // 总的任务量  
  35.    @Provide totalTask: number = 0  
  36.    // 完成的任务  
  37.    @Provide finishTask: number = 0  
  38.   
  39.    build() {  
  40.       Column() {  
  41.          // =======================标题栏st======================//  
  42.          Header({ title: '任务统计案例' })  
  43.          // =======================任务展示卡片组件======================//  
  44.          TaskStatic()  
  45.          // =======================任务列表组件======================//  
  46.          TaskList()  
  47.       }      .width('100%') // Column宽度  
  48.       .height('100%') // Column高度  
  49.       .backgroundColor('#F1F2F3')  
  50.    }  
  51. }  
  52.   
  53. @Component  
  54. struct TaskStatic {  
  55.    @Consume finishTask: number  
  56.    @Consume totalTask: number  
  57.   
  58.    build() {  
  59.       // =======================任务数量显示卡片st======================//  
  60.       Row() {  
  61.          Text('任务进度：') // 任务进度文字  
  62.             .whiteFont()  
  63.             .fontSize(30)  
  64.             .fontWeight(FontWeight.Bold)  
  65.   
  66.          Stack() { // 叠加容器，容器内组件依次入栈，后一个组件覆盖前一个组件  
  67.             // =======================进度条st======================//            Progress({ value: this.finishTask, total: this.totalTask, type: ProgressType.Ring })  
  68.                .width(100)  
  69.             // =======================进度条end======================//  
  70.             Row() { // 两个文本，一个显示完成任务数量，一个显示总的任务数量  
  71.                Text(this.finishTask.toString()) // 完成任务  
  72.                   .fontSize(24)  
  73.                   .fontColor('#76D')  
  74.                Text(`/` + this.totalTask.toString()) // 所有任务  
  75.                   .fontSize(24)  
  76.                   .whiteFont()  
  77.             }         }  
  78.       }  
  79.       .card()  
  80.       .justifyContent(FlexAlign.SpaceEvenly)  
  81.       // =======================任务数量显示卡片end======================//  
  82.    }  
  83. }  
  84.   
  85. @Component  
  86. struct TaskList {  
  87.    @Consume finishTask: number  
  88.    @Consume totalTask: number  
  89.    //任务数组  
  90.    @State tasks: Task[] = []  
  91.   
  92.    handleTaskChange() {  
  93.       this.totalTask = this.tasks.length // 所有的任务  
  94.       // 遍历数组，过滤出已经完成的任务数量      this.finishTask = this.tasks.filter(item => item.finished).length  
  95.    }  
  96.   
  97.    build() { // 子元素中必须只有一个根元素  
  98.       Column() {  
  99.          // =======================新增任务按钮st======================//  
  100.          Button('新增任务')  
  101.             .onClick(() => {  
  102.                // 1. 新增任务进入数组  
  103.                this.tasks.push(new Task())  
  104.                // 2. 改变任务总数  
  105.                this.handleTaskChange()  
  106.             })  
  107.             .width(100)  
  108.             .height(40)  
  109.             .type(ButtonType.Normal)  
  110.             .borderRadius(15)  
  111.             .margin(10)  
  112.          // =======================新增任按钮end======================//  
  113.   
  114.          // =======================渲染列表st======================//         List({ space: 10 }) {  
  115.             ForEach(this.tasks, (item: Task, index) => {  
  116.                ListItem() {  
  117.                   Row() {  
  118.                      Text(`新增任务${index}`)  
  119.                         .fontSize(24)  
  120.                         .whiteFont()  
  121.                      Checkbox({ name: 'checkbox' + index.toString() })  
  122.                         .select(item.finished)  
  123.                         .selectedColor(0xed6f21)  
  124.                         .onChange((value: boolean) => {  
  125.                            item.finished = value  
  126.                            this.handleTaskChange()  
  127.                         })  
  128.                   }  
  129.                   .card()  
  130.                   .justifyContent(FlexAlign.SpaceBetween)  
  131.                   .margin(6)  
  132.                }  
  133.                .swipeAction({ end: this.deleteButton(index) }) // 列表的右滑功能函数  
  134.             })  
  135.          }         .width('100%')  
  136.          .layoutWeight(1) // 将剩下的空间全部给list元素  
  137.          .alignListItem(ListItemAlign.Center) // 列表元素居中  
  138.          // =======================渲染列表end======================//      }  
  139.    }  
  140.   
  141.    @Builder deleteButton(index: number) { // 删除按钮构建函数  
  142.       Button() {  
  143.          Image($r('app.media.delete'))  
  144.             .width(40)  
  145.             .padding(5)  
  146.       }      .width(60)  
  147.       .type(ButtonType.Circle)  
  148.       .backgroundColor(Color.Brown)  
  149.       .onClick(() => {  
  150.          this.tasks.splice(index, 1) // 删除1个  
  151.          this.handleTaskChange() // 一旦更改任务，就需要重新渲染  
  152.       })  
  153.    }  
  154. }
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/288928
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号