开发者学堂课程【Vue.js 入门与实战:组件案例-实现评论的发表和自动刷新列表】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/586/detail/8188
组件案例-实现评论的发表和自动刷新列表
本节主要制作当用户发表评论之后,列表如何从 local storage 中获取。理论上,在页面显示的第一时间,立刻从本地存贮当中调用,并显示到第一条,替换其他数据,此时需要通过以下代码定义方法:
methods:{
locadComments() { //从本地的 localStorage 中加载评论列表
var list =JSON.parse(localStorage.getItem(‘cmts’)’[]’)
this.list=list
此时刷新浏览,发现并不能执行。原因在于,当前的 loadComments 只是被定义成了一个方法,并没有被调用。
beforeCreate(){ //注意:这里不能调用 loadComments 方法,因为在执行这个钩子函数的时候, data 和 methods 都还没有被初始化好},created(){ this.loadComments()},
此时,刷新执行,已经可以正常使用。但仍旧有问题,问题在于,发表评论不会自动刷新,而需要手动刷新。此时需要如下代码执行:
//this.loadComments()
//直接写可以么?不行!因为 loadComments 属于 vm 实例,是相对于父组件有这个方法,而发表评论和按钮是子组件,子组件是无法调用父组件的刷新列表方法的。
列表 vm 实例有 loadComments 这个方法,这个方法可以刷新列表,而父组件是不知道什么时候需要刷新列表的,原因在于刷新列表在子组件,所以父组件只有刷新列表的方法,而不明确调用列表的时间。
子组件有发表评论按钮,子组件可以明确刷新列表的时间,但是没有刷新列表的功能。
所以需要 vm 需要把刷新列表的功能委托给子组件,让子组件在合格的时间,帮助父组件调用刷新列表的功能。
也就是说,父组件怎么把刷新列表的方法能够传递给子组件,这就需要通过时间绑定来实现。代码如下:
<cmt-box@func=”loadComments”></cmt-box>this.$emit(‘func’)}}
此时保存,输入内容,发现已经可以自主刷新最新评论。