首先画出简单的界面如下：

说说我的思路：由于是为了去练习组件之间传值，所以将页面上的写评论部分写在了子组件中，然后在然后然后子组件点击发表将数据传递给父组件的data,再由父组件来渲染评论社区的页面。

1.先主实例的data中写一个固定的评论列表，然后在页面上利用v-for来渲染实现页面效果。

2.在模板中定义一个方法publishctx，用来发表数据，但是如何拿到评论人和评论内容呢？

2.1运用v-model来动态绑定数据。

2.2在方法中定义一个对象，用来存放拿到到数据。

2.3利用localstorage来实现本地存储和数据的获取。将从local'storage中获取到的数据转化成对象格式放入list中，覆盖原有的list.然后重新把数据保存在本地。这里只是实现了本地存储，而页面上如何拿到发表的数据，且看下一步。

3.现在需要在实例对象中定义一个方法localComment()，从本地存储localstorage中来获得数据列表，并将拿到的数据列表覆盖原有的列表。然后在created中调用这个方法实现页面渲染的效果。但是呢？这一步当你点击发表后，并不会立即在页面上出现你发表的内容，你需要手动更新数据，这显然是不合理的。

所以需要在子组件的publishctx方法中调用localComment方法。这里就涉及了子组件调用父组件的方法。

在父组件中绑定方法：localComment，在子组件中利用this.$emit()来调用。

下面是详细代码区域，有问题欢迎提问。前端小白学习路~~~

<div id="app" style="padding: 20px"><comts @func="localComment"></comts><h3>评论社区：</h3><ul class="list-group"><li class="list-group-item" v-for="item in list"><span class="badge">{{item.id|dataformat('')}}：{{item.name}}</span>{{item.content}}</li></ul></div><template id="tmp1"><div><form role="form"><div class="form-group"><label for="name">评论人:</label><br><div class="col-lg-8"><input type="text" class="form-control" placeholder="请输入..." v-model="name"></div></div><br><div class="form-group"><label for="content">评论内容:</label><textarea class="form-control" rows="3" v-model="content"></textarea></div></form><input type="button" value="发表" class="btn btn-primary" @click="publishctx"></div></template><script>//这个全局过滤器用来过滤时间，将时间转换成我们经常看的形式：yyyy-mm-ddVue.filter('dataformat',function(datastr,pattern){var dt=new Date(datastr);var y=dt.getFullYear();var m=(dt.getMonth()+1).toString().padStart(2,'0');var d=dt.getDate().toString().padStart(2,'0');if(pattern.toLocaleLowerCase()=='yyyy-mm-dd'){return `${y}-${m}-${d}`;}else{var hh=dt.getHours();var mm=dt.getMinutes();var ss=dt.getSeconds();return`${y}-${m}-${d} ${hh}:${mm}:${ss}`;}})//这一部分是子组件，var commentBox={data:function(){return{name:'',content:'',}},template:'#tmp1',methods:{publishctx(){var comment={id:Date.now(),name:this.name,content:this.content};//从Localstorage获取到数据var list=JSON.parse(localStorage.getItem('ctx')||'[]');//把拿到的数据放在放入list中list.unshift(comment);//重新把评论数据保存在本地localStorage.setItem('ctx',JSON.stringify(list));//清空数据this.name=this.content='';this.$emit('func');}}};var vm=new Vue({el:'#app',data:{list:[{id:'Date.now()',name:'李白',content:'抽刀断水水更流'},{id:'Date.now()',name:'孟浩然',content:'千里江陵一日还'},]},created:function(){return this.localComment();},methods:{localComment(){//从本地的localstorage中加载评论列表var list=JSON.parse(localStorage.getItem('ctx')||'[]');this.list=list;}},components:{'comts':commentBox},})</script>