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()来调用。

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

 

    
    
评论社区：
    

        

            {{item.id|dataformat('')}}：{{item.name}}
            {{item.content}}