摄影网站设计报告专业营销的网站建设公司

---

前言

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

---

一、组件拆解

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

二、数据准备

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

export interface ReplyItem{avatar: ResourceStr //头像author: string //作者id: number //评论的idcontent: string //评论内容time: string //发表时间area: string //地区likeNum: number //点赞数量likeFlag: boolean | null //当前用户是否点赞
}export class ReplyItemModel implements ReplyItem{id: number = 0avatar: string | Resource = ''author: string = ''content: string = ''time: string = ''area: string = ''likeNum: number = 0likeFlag: boolean | null = nullconstructor(model:ReplyItem) {this.id = model.idthis.avatar = model.avatarthis.author = model.authorthis.content = model.contentthis.time = model.timethis.area = model.areathis.likeNum = model.likeNumthis.likeFlag = model.likeFlag}
}

三、组件通信

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

3.1 参数传递

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

3.2函数传递

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

3.3 注意事项

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