注意：
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>
转载 https://blog.csdn.net/qq_42036616/article/details/82955967