注意:
1.最重要理解这里的父组件的刷新功能,通过v-on事件绑定委托给子组件执行,因为子组件的提交按钮和父组件的刷新评论的功能是分开的。
2.没有数据时直接点击提交按钮时会出bug,并且关闭后重新加载页面还是会存在。因为localStorage在浏览器中是永久缓存的,通过localStorage清除缓存,如下 。最后的执行效果,会有演示,本来可以做出判断为空时,不给提交,这里为了说明这个问题
window.onunload=function(){
localStorage.clear();
}
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/vue.js"></script>
<link rel="stylesheet" href="../lib/bootstrap.css">
</head>
<body>
<div id="app">
<cmtbox v-on:flash="loadComment"></cmtbox>
<!--将父组件的方法委托给子组件-->
<ul class="list-group">
<li class="list-group-item" v-for="item in list" :key="item.id">
<span class="badge">{{ item.user }}留言:</span>
{{ item.content }}
<!--badge:徽章-->
</li>
</ul>
</div>
<template id="tmp">
<div>
<div class="form-group">
<label>发表人:</label>
<input type="text" class="form-control" v-model="user">
</div>
<div class="form-group">
<label>留言内容:</label>
<textarea class="form-control" v-model="content"></textarea>
</div>
<div class="form-group">
<input type="button" value="发表" class="btn btn-primary" @click="submit">
</div>
</div>
</template>
<script>
window.onunload=function(){
localStorage.clear();
};
//因为localStorage在浏览器中是永久缓存的,关闭后重新加载页面还是会存在先前的数据,特添加此项
var commentBox = {
template:'#tmp',
// 通过id绑定后,直接将组件的内容在<template>定义,更加简单直观
data(){
return {
user:'',
content:'',
}
},
methods:{
submit(){
var comment = { id:Date.now(), user:this.user,content:this.content};
//实例化一个新的数组对象
var list = JSON.parse(localStorage.getItem('cmts') || '[]');
//从localStorage中获取数据
list.unshift(comment);
//添加在最上端
localStorage.setItem('cmts',JSON.stringify(list));
//加入更新的对象后,重新刷新localStorage数据
this.user = this.content = '';
this.$emit('flash');
//触发父组件委托的方法
}
//发表评论的方法
}
};
var vm = new Vue({
el:'#app',
data:{
list:[
{ id:1,user:'陈小帅',content:'马克·吐恩说过:'},
{ id:2,user:'陈xiao帅',content:'一个拿着棒槌的人'},
{ id:3,user:'陈大帅',content:'看什么都像钉子'}
]
},
components:{
'cmtbox':commentBox
//将组件命名
},
methods:{
loadComment(){
var list = JSON.parse(localStorage.getItem('cmts') || '[]');
this.list = list;
}
},
created(){
this.loadComment();
}
});
</script>
</body>
</html>
效果,前半段正常,后面输入空有bug:
没有添加清除数据代码:
添加了之后: