harmonyos-next - 鸿蒙应用开发从入门到入行 - 篇5:组件化开发思想开发鸿蒙案例（详解父子组件传值） - 个人文章

鸿蒙应用开发从入门到入行

第五天 - 组件化开发思想开发鸿蒙案例（详解父子组件传值）

导读：在本篇文章里，您将掌握组件化开发、组件传值等相关知识。并能彻底弄懂鸿蒙父子组件数据的同步机制。本篇干货很多，特别是有些关于组件的细节，需要好好掌握。

本次整体学习目标介绍

最近比较忙，不过好在本文也是紧赶慢赶的弄出来了。
话不多说，我们先回顾一下我们需要做的案例
我们发现，这是一个综合性比较强的案例，涉及了布局、状态切换、列表渲染、数据新增、侧滑删除等功能。非常适合入门时的综合练手。
接下来，我们分析一下这个案例布局大致的划分

Progress的使用

咱们本次案例中需要用到一个进度缓，如上图
这种效果ArkUI已为我们提供了内置组件，即 Progress

使用方法

Progress( { value: 当前值, total： 总值 } )

例

Progress( { value: 4, total： 10 } ) // 总量10，已完成4

默认情况下，Progress产生的是水平进度条，因此，上述代码会得到如下图效果
一些细节：
- 默认情况下，value为0，total为100
- 当Progress的宽度大于或等于高度时水平显示（如上图）
- 当Progress的宽度小于高度时（不包含等于，必须小于高度）垂直显示（如下图）
type参数
- 用法
```
Progress( { value: 5, total: 10, type: ProgressType.Ring } )
```
- 通过使用Progress传入type属性，可以修改Progress的样式
- 该参数需要传入ProgressType类型的枚举，一共有5种样式，分别如下
  - ProgressType.Linear：线性样式，默认值。样式为上边两张图效果。
  - ProgressType.Ring：环形样式（无刻度），样式如下
  - ProgressType.ScaleRing：环形样式（有刻度)，样式如下
  - ProgressType.Eclipse：圆形样式

  

- 和ProgressType.Capsule：胶囊样式（通过宽高设置水平或水平样式，参照ProgressType.Linear）

  ![img](https://alliance-communityfile-drcn.dbankcdn.com/FileServer/getFile/cmtyPub/011/111/111/0000000000011111111.20240807205217.69470531219565966408732070308197:50001231000000:2800:D306C317483EE55F06290A8A90524D203585FD4BAEE1CE35153F69E77532B74A.png?needInitFileName=true?needInitFileName=true)

修改颜色，默认情况下，进度条底色为灰色，前景色（进度值的色）为渐变蓝色。如果需要改，可以分别通过backgroundColor（背景色）与 color（前景）改
```
        Progress({ value: 3, total: 10, type: ProgressType.Ring })
          .width(80)
          .height(80)
          .backgroundColor(Color.Red)
          .color(Color.Pink)
```
- 这里是把背景改为红，进度值为粉色，如下图

组件化开发

组件：组成页面的一部分
组件化开发：把页面的每一部分当成一个组件，然后把这些组件像搭积木一样搭在一起即为组件化开发
组件化开发优势：代码分门别类，页面与逻辑内聚，方便阅读与维护、方便复用，等等，总之好多好多优点，这就不说了。

项目准备

我们来看看，这个年度待办案例，我们本次分几个区域（几个组件）
通过上图发现，我们需要三大区域，分别对应头部区（统计）、输入区、列表展现区，因此新建三个组件，然后集中到Index.ets来用
步骤
- 新建项目，过程略
- 把侧滑显示的删除图标放到entry/src/main/resources/base/media文件夹里（点我下载）
- 在pages同级目录，新建view文件夹
- 在view文件夹，新建三个ets文件，分别起名叫TodoHeader、TodoInput、TodoMain，里面，每个组件里放一个Text作为暂时的显示，且导出这个组件，这里仅贴TodoHeader代码，其他两个组件类似
```
@Component 
export struct TodoHeader {
  build () {
    Text('TodoHeader')
  }
}
```
- 然后来到pages/Index.ets，导入这三个组件，并依次写到Column里（因为这三个组件如上图所示，就是从上到下依次排列）
  - 技巧：上篇说过，不用导入，只要在组件写了export的情况下，直接写组件名出提示后按回车，会自动生成导入代码
  - Index.ets代码如下
```
import { TodoHeader } from '../view/TodoHeader'
import { TodoInput } from '../view/TodoInput'
import { TodoMain } from '../view/TodoMain'

@Entry
@Component
struct Index {
  build() {
    Column({ space: 20 }) {

      TodoHeader()
      TodoInput()
      TodoMain()
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#f2f3f5')
  }
}
```
- 注意：根据效果图发现整个页面背景是灰色的，因此记得给整个Column加背景色，每个区域之间有间距，因此加space
- 至此，项目准备工作完成

TodoHeader - 布局实现

分析布局如图
根据上图很明显能发现，就是一个Row（水平布局），里面一个Text显示标题，一个Stack放层叠布局（里面再放Progress与Text，具体后面说）
- 记得给Row宽度、高度与背景色、Text要加粗、内容居中等

基于此，代码如下

@Component
export struct TodoHeader {
  build() {
    Row() {
      Text('今年目标')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
        .margin({ right: 20 })


      Stack() {
        Progress({ value: 0, total: 10, type: ProgressType.Ring })
          .width(80)
          .height(80)
        Text(`0 / 10`)
      }
    }
    .width('100%')
    .height(110)
    .justifyContent(FlexAlign.Center)
    .backgroundColor(Color.White)
  }
}

这里其他属性都很容易，如果有不懂的可以评论区留言
主要解释下Stack环形进度条那里
- 如上图解释的：这里其实有两个组件Progress用来显示环形进度条，但是它没有文字，所以还要搭一个Text
- 而如果不加堆叠，则他们会并排显示，如下图
- 所以此时我们是期望能让 3 / 10 这个Text能叠在Progress上面，所以这种层叠效果，需要套一个Stack来实现（注意，默认情况下后面的在最上层，因此Text必须放在最后。除此外，默认都是居中堆叠，所以刚好Text就在环形中间了）

注意：本代码里的宽高颜色都可以由各位根据预览效果自行设置，不必强求与猫林老师一致

TodoInput - 布局实现

如上图所示，Row里放TextInput即可，记得让TextInput不用铺满Row。因为将来必然会需要拿到输入框里的内容，因此声明个变量，并与之双向绑定

代码如下

@Component
export struct TodoInput {
  @State newFlag: string = ''

  build() {

    Row() {
      TextInput({ placeholder: '请输入新目标', text: $$this.newFlag })
        .width('90%')
    }
    .width('100%')
    .height(80)
    .backgroundColor(Color.White)
    .justifyContent(FlexAlign.Center)
  }
}

TodoMain - 布局实现

发现这个区域就是一堆上一篇文章里教大家封装的组件，直接拿来用即可
- 注：上一篇里猫林老师不小心起错名字。其实规范的名字应该叫TodoItem，上一篇写成了ToDoItem，这里正好勘误，用更规范的写法

步骤

来到view新建TodoItem.ets文件，然后写如下代码（分析过程略，见上篇）

@Component
export struct TodoItem {
  build() {
    Row() {
      Checkbox()
        .margin({ left: 20, right: 20 })
      Text('跟猫林学鸿蒙')
    }
    .width('100%')
    .height(40)
    .backgroundColor(Color.White)
    .borderRadius(20)
  }
}

然后来到TodoMain组件，进行导入与使用，为了暂时能看到一堆内容，我们用ForEach先循环生成10个， TodoMain代码如下

import { TodoItem } from './TodoItem'

@Component
export struct TodoMain {
  @State todoList: number[] = [1, 2, 3, 4, 5, 6, 7]

  build() {
    Column({ space: 10 }) {
      ForEach(this.todoList, (item: number) => {
        TodoItem()
      })
    }
    .width('100%')
  }
}

这里TodoMain的根容器是Column，因为它需要一行一行从上到下来显示

初始数据与说明

初始数据如下

 class TodoModel {
   text: string = ''
   finished: boolean = false
 }

 @State totalFlags: Array<TodoModel> = [
    { text: "月入5万", finished: false },
    { text: "中彩票500万", finished: false },
    { text: "找个富婆", finished: false },
    { text: "买套别墅", finished: false },
    { text: "改掉爱做梦的习惯", finished: false },
  ];

解释
- 每个新年目标都是个对象，有两种属性：text（目标文字）、finished（是否完成）
- 以下是对语法的解释，会TS的可跳过下面这三段
  - 因为ArkTS是一种类型严谨的语言，因此需要对这种对象做一个类型定义，即声明一个类叫TodoModel，它里面有两个这样的属性
  - totalFlags即为这种对象类型的数组，例如Array<number>代表数组每个元素都是数值类型的数组，所以上面写的Array<TodoModel>代表数组每个元素都是TodoModel类型的数组
  - 数组也可以简写为 number[] 、本例中的Array<TodoModel>可简写为 TodoModel[]
按照官方的编码规范指导，这种项目中用到的数据对应的类，要写到viewsmodel文件夹（与pages平级），我们新建好文件夹后，也在此文件夹再新建TodoModel.ets文件，声明这个类，并导出
- 文件内代码如下
```
export class TodoModel {
  text: string = ''
  finished: boolean = false
}
```

根据功能分析，本案例的年度目标必然是一个数组，且可对其增、删、改。但是这个数组在本案例中三大组件里都需要用：
- TodoHeader 需要数组来统计总目标和已完成目标
- TodoInput 需要给数组添加新内容
- TodoMain 需要展示数组内容，并且将来侧滑时需要能删除数组内容

基于上面需求，提问：数组应该放在哪？

没错，应该放到他们共同的父组件，本案例即为Index.ets里。
来到Index.ets，导入上面声明的类，并声明一个数组

......

import { TodoModel } from '../viewmodel/TodoModel'

@Entry
@Component
struct Index {
  
  @State totalFlags: Array<TodoModel> = [
    { text: "月入5万", finished: false },
    { text: "中彩票500万", finished: false },
    { text: "找个富婆", finished: false },
    { text: "买套别墅", finished: false },
    { text: "改掉爱做梦的习惯", finished: false },
  ];

  build() {
    ......
  }
}

组件传参 - 父传子

此时数据有了，但还没交给TodoMain去显示，此时相当于要把Index里的数据给TodoMain，且因为Index是父组件，TodoMain是子组件，因此这种数据传递方式叫父传子，即把父的数据传递给子组件
- 注：本章节主要是为了学习语法，最终部分代码不会出现于年度待办案例，因此此时先把TodoMain与TodoItem代码做一个备份。然后再开始练下面语法
语法步骤：
- 子里声明一个成员变量
- 父里使用组件时，在小括号里传入
例如，本案例中我们有 TodoMain和TodoItem，因为TodoMain包含了TodoItem。所以TodoMain是父TodoItem是子。我们就用这两个组件试试父传子

代码步骤：

TodoItem里声明一个变量叫name，并在Text里使用，代码如下

export struct TodoItem {
  // 声明个成员变量，等待父传，注意：此时没加任意装饰器
  name: string = ''

  build() {
        .......
    Text(this.name)
  }
}

TodoMain里声明一个变量name，并传递给TodoItem

@Component
export struct TodoMain {
  .......
  @State name: string = 'abc'


  build() {
    Column({ space: 10 }) {
      ........
      ForEach(this.todoList, (item: number) => {
        // 这里是传参，把父的name传递给了子里的name
        TodoItem({ name: this.name })
      })
    }
    .width('100%')
  }
}

此时会发现，正因为把父的name，也即数据为abc，传递给了子，所以此时TodoItem显示的即为abc，如下图

注意，此时虽能成功父传子，但是父的数据一旦改变，子并不会跟着改变

我们此时可以测试一下，在TodoMain里，添加一个Button，并在Button里修改掉name的值，如下代码

export struct TodoMain {
    ....
  @State name: string = 'abc'

  build() {
    Column({ space: 10 }) {
      Button('我改').onClick((event: ClickEvent) => {
        this.name = 'Good猫林'
      })
       
     .........
     }
        ......
  }
}

点击按钮后会发现，子组件也即TodoItem上没有任何变化

如果希望实现父的数据改变，子的数据能随着改变，需要在子的变量前加@Prop装饰器
- 修改TodoItem里的name，前面加上@Prop，再来点击按钮看变化
```
export struct TodoItem {
  // 此时加了@Prop修饰
  @Prop name: string = ''

  build() {
    Row() {
      Checkbox()
        .margin({ left: 20, right: 20 })
      Text(this.name)
    }
   
   .......
  }
}
```
- 此时点击按钮，让父的数据改变，子里的也跟着变

到目前，我们已经学了两个用来修饰成员变量的装饰器，分别是@State、@Prop，我们对它总结一下
- @State：主要是装饰给组件自己使用的数据，效果：能让成员变量的值改变后，界面也能刷新
- @Prop：主要是用在作为子组件时，用来装饰由父传递过来的数据，效果：能让父的数据改变子也能接收到
  - 注意：在ArkTS中，即使父传递的是引用类型的数据，若不加@Prop修饰，一样会导致父的数据改变子里不会变，同学们有兴趣可以自行测试

组件传参 - 父传子双向同步

上面我们讲到，子里的成员变量加@Prop后，即可让父的数据改变，子随之改变，也即父的数据自动同步到子。

但是，目前无法实现子同步到父，也即子里改变了这个父传进来的数据，子里自身能改变，但是父的无法改变。也即Vue框架里的单向数据流

例：在TodoMain里用一个Text显示name的值，并在TodoItem里给Row加点击事件并修改name的值，我们可观察效果

TodoMain代码

export struct TodoMain {
    ....
  @State name: string = 'abc'

  build() {
    Column({ space: 10 }) {
      Button('我改').onClick((event: ClickEvent) => {
        this.name = 'Good猫林'
      })
        
      Row() {
        // 显示name
        Text(this.name)
      }
       
     .........
     }
        ......
  }
}

TodoItem代码

export struct TodoItem {
  // 此时加了@Prop修饰
  @Prop name: string = ''

  build() {
    Row() {
     ......
    }
    .onClick(() => {
      this.name = '学鸿蒙'
    })
   
   .......
  }
}

发现当我们点击TodoItem时，TodoItem自身的name数据了学鸿蒙，但是父里的还是abc，如图

如果希望实现：父改了数据，自动同步到子。以及子改了数据，也同步到父，需要把子里的@Prop修改成@Link

注意：如果用@Link修饰了成员变量，则成员变量不可初始化，例

export struct TodoItem {
  // 此时加了@Link，不用初始化
  @Link name: string

  build() {
    .......
  }
}

虽然仅仅只是把@Prop改成了@Link，且把初始化值的部分删了，但此时已经完成了双向同步，我们来点击一下Row测试一下效果，会发现如下图所示，子和父都变成了学鸿蒙

总结@Prop与@Link
- 相同点：
  - 都是用在子组件，用来接收父传递过来的数据，
  - 都可以实现父改变数据后同步给子
- 不同点：
  - 初始化值不同：
    - @Prop需要初始化值，相当于给默认值。可以实现，父如果传了就用父的数据，如果没传则用默认值
    - @Link不能初始化，相当于必须要父传递数据了才有数据
  - 同步给父不同
    - @Prop修饰的数据，子里改变了不会同步给父
    - @Link修饰的数据，子里改变了会同步给父

年度目标案例 - 数据展示

回到我们之前最初的需求：要把Index里的数据给TodoMain，经历了上面组件传参的学习后，我们能很快完成。

步骤：

注意：先把之前备份的TodoMain与TodoItem恢复
TodoMain里，声明成员变量接收Index传递过来的数组，之前备份的文件里其实已经声明过，只不过是number类型的，改成TodoModel即可，代码如下
```
@Link todoList: TodoModel[] = []
```
- 解释为什么用 @Link修饰符
  - 因为在TodoMain里将来需要改变数组（例如侧滑删除等），需要同步给父组件（即Index），因此用@Link
Index里传递（这里Index的数据在上面初始数据与说明章节已声明过）
```
TodoMain({ todoList: this.totalFlags })
```
此时已经把数组从Index传递到TodoMain，但是TodoMain里又需要遍历这个数组去产生TodoItem，并且需要把数组每一项交给TodoItem去渲染，所以这里又要父传子，思路示意图如下

来到TodoItem，声明一个TodoModel的对象，用来接收数组每一项，并且把item里的finished属性绑定给Checkbox，text属性绑定给Text去显示

import { TodoModel } from '../viewmodel/TodoModel'

@Component
export struct TodoItem {

  @Prop item: TodoModel = new TodoModel() // 本次代码

  build() {
    Row() {
      Checkbox()
        .select(this.item.finished) // 本次代码
        .margin({ left: 20, right: 20 })
      Text(this.item.text) // 本次代码
    }
    .width('100%')
    .height(40)
    .backgroundColor(Color.White)
    .borderRadius(20)
  }
}

TodoMain里使用ForEach渲染

import { TodoItem } from './TodoItem'
import { TodoModel } from '../viewmodel/TodoModel'

@Component
export struct TodoMain {
  @Link todoList: TodoModel[]

  build() {
    Column({ space: 10 }) {
     
        // 本次代码
        ForEach(this.todoList, (item: TodoModel, index: number) => {
            // 这里用了ES6简写，完整写法是 TodoItem({ item: item })代表把ForEach里的item传递给TodoItem需要的item
            TodoItem({ item })
        })
      // 以上是本次代码改动
    }
    .width('100%')
  }
}

此时便完成了数组的渲染

年度目标案例 - 目标完成打勾

需求如下：
根据上面数据说明，打勾与否需要与每一项的finished属性绑定，因此先来到TodoItem给Checkbox的select属性做双向绑定
```
      Checkbox()
        .select($$this.item.finished)
```
- 注：
  - Checkbox的select属性方法是用来设置它是否打勾的。传true代表打勾，传false代表不打勾
  - 这里我们除了要数据能影响Checkbox以外，也需要当我们操作组件后结果能影响到数据，因此加$$做双向绑定
然后根据finished的值，做不同的处理
- 如果是true，给文字加删除线，否则不加任何线
- 如果是true，给文字加opacity为半透明，否则不透明
  - 解释：通过需求图可以看到，要让文字和删除线都变灰，最快的方式是给整个Text加透明度，配合白色底就会呈现灰色。而如果单独知识改文字颜色也即fontColor只会让文字变灰，删除线不变，还得在decoration里加color才有用，不方便
- 代码如下
```
Text(this.item.text)// 本次代码
  .opacity(this.item.finished ? 0.4 : 1)
  .decoration({ type: this.item.finished ? TextDecorationType.LineThrough : TextDecorationType.None })
```
  - 注：decoration就是Text设置文字线条的样式，可以设置删除线、下划线等，具体可查官方文档

插播 - 目前鸿蒙开发的缺陷

目前虽然实现了数据展现与目标完成的打勾，但此时存在数据传递的问题
通过最终效果图我们知道，我们需要统计出已完成的目标数量展现到进度条里。但此时，我们在TodoItem里打勾了后，finished的值已经改变（通过界面有变化能证明），但是没有传入到父，导致父里的finished还是false
例
- 我们在父里（TodoMain）里写一个Row输出数组里下标0的元素的finished
```
.......

  build() {
    Column({ space: 10 }) {

      Row() {
        Text(this.todoList[0].finished + '')
      }

      ..........
    }
  }
.....
```
- 注：这里的+ '' 是为了把finished转为字符串类型，因为Text只能用字符串
- 然后给第一项打勾，会发现如下图效果

大家思考一下：为什么会这样呢？
- 请思考
- 请思考
- 请思考
- 请思考
- 请思考
- ..........
- 没错，就是因为子里用的是@Prop，我们上面说过，@Prop只能实现父数据同步到子，子里变了无法同步到父，此时就是这原因导致

如何解决？
- 相信同学们都能想到用@Link，父子双向同步。但此时，鸿蒙的缺陷体现出来了！当你把TodoItem里的item改成@Link装饰后，惊讶地发现：在TodoMain里报错了！如下图
原因：语法限制，@Link只能接收父组件里声明的第一层成员变量
什么叫第一层？
- 就好比一个数组，数组里全是对象。对于数组而言即为第一层，数组里的每个对象称之为第二层，以此类推
- 再好比一个嵌套对象。即对象里有个属性又是对象，那么外层的称之为第一层，里面的属性即为第二层，以此类推
所以上述报错里写的item相当于就是数组里的对象，也即第二层，所以报错

出现这个语法限制的根本原因是：目前的鸿蒙开发中，默认情况下无法监听到第二层的改动。而@Link又要实现双向同步，你都无法监听到改动，又如何完成双向同步呢？

所以鸿蒙也给了解决方案：使用@Observed加@ObjectLink来解决。但是，猫林老师这里不打算讲它。因为这个解决方案其实用起来也很麻烦繁琐，非常不人性化。
- 有兴趣的同学可以自行去学习Observed与ObjectLink，猫林老师这里只讲最实用的技术，帮助你更快开发鸿蒙！
- 题外话，从API12开始，鸿蒙提供了@ObservedV2，力求解决监听这种监听属性的问题。但猫林老师尝鲜过，也不是很方便，这里赞不推荐
- 题外话2：不要一听猫林老师吐槽一句鸿蒙开发中存在这种不太方便的点，就觉得鸿蒙不行。任何语言刚推出时总有些坑或者不太方便的地方需要等待后续更新。当初苹果的Swift刚开始推出时也有许多地方有待完善，苹果也是慢慢更新使之越来越好。所以大家要保持好信心，未来可期。而且，华为官方也确实不断的对鸿蒙开发做着改进，就像上面提到的@ObservedV2。所以鸿蒙开发未来必然会越来越方便，越来越容易好用。可是到那时越容易就会越多人涌进，但是不要怕。你们在此刻开始进入鸿蒙的人，都算得上是鸿蒙的元老级程序员。（毕竟现在连纯血鸿蒙的正式版都还没发布，仅仅是测试版呢），所以对你们，更是抓住风口的弄潮儿，必将成为吃到红利的一波人！

待办列表 - 解决缺陷 - 实现打勾改动同步给父

那，猫林老师这里怎么解决上述缺陷呢？首先，因为@Link目前不能用，那咱们就把它换回@Prop先
```
.....
@Component
export struct TodoItem {
  @Prop item: TodoModel
  .....
}
```
可是@Prop又确实无法让父的数据同步改变，该怎么办呢？
既然子里无法改动到父，那就换个思路。让父，自己改！！
整体思路是：
- 让父提供一个修改数据的方法，子里要修改时调用父的方法即可修改！
- 如图
实现：
- 来到TodoMain，声明一个方法如下
```
  changeStatus(item: TodoModel, index: number) {
    this.todoList[index] = {
      text: item.text,
      finished: !item.finished
    }
  }
```
  - 解释：
    - 本方法需要传入被点的item以及被点的item的索引
    - 通过索引的方式改掉数组中这一项，文字不变，但是完成状态取反即可
    - 这时候可能有老铁有疑问：
      - 为什么不直接 item = !item.finished
      - 还是那个问题：目前不支持监听第二层数据改变，直接改item还是第二层。
      - 但数组是第一层，因此你用数组[索引]的方式，就是在改第一层数据，这是能被监听到的
- 此时需要把这个方法传递给TodoItem，因此TodoItem需要声明一个成员方法来接收
```
export struct TodoItem {
  ......
  onChange: () => void = () => {}
  .....
}
```
  - 解释：
    - 方法名叫onChange，它的类型是一个无参数无返回值的函数，初始化值是一个空函数
    - 一般情况下，这种由外界传入的方法不需要加装饰器
- 然后给Select组件加onChange 事件，这个事件是当Select发生勾选状态改变就会调用的事件，在里面调用传入的onChange方法
```
     Checkbox()
        .select(this.item.finished)
        .margin({ left: 20, right: 20 })
        .onChange(() => {
          // 本次代码
          this.onChange()
        })
```
- 回到TodoMain做方法传递：此时调用TodoItem除了之前要传入的item，现在还要多一个onChange
```
      ForEach(this.todoList, (item: TodoModel, index: number) => {
        // 此时调用TodoItem
        TodoItem({
          item, onChange: () => {
            this.changeStatus(item, index)
          }
        })
      })
```
  - 解释参数：item即为当前变动的数据，index即为当前数据对应的下标（都是changeStatus需要用到的内容）
  - 注意看：这里我没有直接把this.changeStatus 这个方法传递给onChange，而是声明了一个新的箭头函数，只不过在箭头函数里的函数体里调用了this.changeStatus，这么做的原因是this.changeStatus方法里有this.todoList这样的代码，我们都知道this是指当前环境上下文，它在TodoMain里，就代表TodoMain这个上下文，所以它修改它的todoList没毛病。但如果你是直接把this.changeStatus传递给onChange，那它相当于是在todoItem里调用，同样的this也会变成todoItem上下文，此时它是没有todoList数组的，所以这里利用箭头函数保留当前上下文的特点，在todoMain里用箭头函数再包一层，即可保证this依然指向todoMain ------- 这段请可能理解，因为文字有其局限性，实在不理解等以后猫林老师出视频教程再来看
  - 附：有懂JS的同学可能会问：那可以 onChange: this.changeStatus.bind(.....)这样的方式传递吗？似乎也能绑定当前this指向呀？
    - 答：不能！ArkTS中不允许使用call、apply、bind
    - 具体可查看当前最新文档，点我进入，打开页面后搜：不支持Function.bind
至此，状态改变同步给父已完成。
鉴于篇幅关系以及一篇文章颗粒度太大也影响大家阅读。所以年度目标这个案例的剩余部分我在下一篇文章讲完，其中下一篇也会以需求驱动的方式为大家讲到很多干货新知识，请拭目以待！

总结今日内容

组件
组件化开发思想
父子组件数据传递与同步
本篇干活与细节略多，需要多认真思考学习。

忠告：我们是以需求驱动学习知识点。特别是本篇含有部分需要理解与实操的内容。鸿蒙零基础的同学，一定要好好的跟着敲本案例代码才能理解

课后练习

判断题
- 一个Progress的宽度是100，高度是150，此时环形图一定是垂直方向的线性样式滚动条

互动简答题

思考：本案例中，最终TodoItem里的数据打勾变化后（完成状态变化），TodoMain已经能成功收到改动了。那么它的父组件，最早持有数组的Index有收到改动吗？请说出你的理由，打在评论区

判断题答案

错。原因自己思考，实在不懂可以评论区留言找一起学的同学帮助

鸿蒙应用开发从入门到入行 - 篇5:组件化开发思想开发鸿蒙案例（详解父子组件传值）

鸿蒙应用开发从入门到入行

第五天 - 组件化开发思想开发鸿蒙案例（详解父子组件传值）

本次整体学习目标介绍

Progress的使用

组件化开发

项目准备

TodoHeader - 布局实现

TodoInput - 布局实现

TodoMain - 布局实现

初始数据与说明

组件传参 - 父传子

组件传参 - 父传子双向同步

年度目标案例 - 数据展示

年度目标案例 - 目标完成打勾

插播 - 目前鸿蒙开发的缺陷

待办列表 - 解决缺陷 - 实现打勾改动同步给父

总结今日内容

课后练习

互动简答题

判断题答案

猫林老师

引用和评论

鸿蒙开发之PixelMap介绍与实现图片变换

HarmonyOS NEXT 技术问答冲榜，等你来战！

“一起学 HarmonyOS”第二弹来啦！

HarmonyOS Next 应用实战案例—“马背上的家乡”元服务

API接口设计的未来趋势：探索技术方向与实践方案

HarmonyOS 如何获取设备信息（系统、版本、网络连接状态）

构建安全护盾：HarmonyOS 应用的数据安全审计与日志管理实战