流量购买网站免费推广平台哪些比较好
文章目录
- 前言
- 一、组件拆解
- 二、数据准备
- 三、组件通信
- 3.1 参数传递
- 3.2函数传递
- 3.3 注意事项
前言
每个模块学习完,也应相对做个案例来巩固学习内容。做完开发案例后,也应及时总结分析来进一步加深对功能模块的认识。以下则是对评论案例的开发过程分析。
一、组件拆解
将评论案例的页面进行分析,拆解成一个一个组件。在项目中新建对应的组件文件,然后进行页面编写,完成后导出子组件,让父组件调用使用。
二、数据准备
在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改变。