鸿蒙开发05评论案例分析

---

前言

每个模块学习完，也应相对做个案例来巩固学习内容。做完开发案例后，也应及时总结分析来进一步加深对功能模块的认识。以下则是对评论案例的开发过程分析。

---

一、组件拆解

将评论案例的页面进行分析，拆解成一个一个组件。在项目中新建对应的组件文件，然后进行页面编写，完成后导出子组件，让父组件调用使用。

二、数据准备

在models文件夹下，编写需要的数据，确定数据字段。当前案例只是个静态案列，所以没有网络请求，并将静态数据填充到页面中。

export interface ReplyItem{
  avatar: ResourceStr //头像
  author: string //作者
  id: number //评论的id
  content: string //评论内容
  time: string //发表时间
  area: string //地区
  likeNum: number //点赞数量
  likeFlag: boolean | null //当前用户是否点赞
}

export class ReplyItemModel implements ReplyItem{
  id: number = 0
  avatar: string | Resource = ''
  author: string = ''
  content: string = ''
  time: string = ''
  area: string = ''
  likeNum: number = 0
  likeFlag: boolean | null = null

  constructor(model:ReplyItem) {
    this.id = model.id
    this.avatar = model.avatar
    this.author = model.author
    this.content = model.content
    this.time = model.time
    this.area = model.area
    this.likeNum = model.likeNum
    this.likeFlag = model.likeFlag
  }
}

三、组件通信

在父组件中使用子组件后，会出现组件通信的情况。数据是在父组件中声明，子组件要想改变父组件中的数据，就需要子组件调用父组件中的函数。

3.1 参数传递

父组件传递参数给子组件。如果传递参数是简单类型，就是值传递，修改子组件中的值不影响父组件，修改父组件不影响子组件的值。如果传递参数是复杂类型，就是引用传递，修改子组件或父组件都会影响值变化。

3.2函数传递

子组件定义函数类型，父组件传递函数给子组件。子组件可以通过函数直接操作父组件中的数值。

3.3 注意事项

@State修饰符修饰的属性参数，只会监测到复杂参数的第一层或第二层参数改变时，才会触发UI改变。