vue组件实现发表评论功能（localStorage）

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

说说我的思路：由于是为了去练习组件之间传值，所以将页面上的写评论部分写在了子组件中，然后在然后然后子组件点击发表将数据传递给父组件的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-dd
    Vue.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>