vue-组件评论功能的实现

效果图

起步

涉及知识：

<code>vue父子组件</code>定义以及传值
<code>H5 localStorage</code>
<code>JSON.stringify()</code>和<code>JSON.parse()</code>

效果分析

页面构成

父组件包含评论列表
子组件包含评论人、评论内容以及评论时间

页面结构

发表评论功能[子组件]

先组织出一个最新的评论数据如：<code>{user:'张三',content:'今天天气不错~'}</code>
定义变量<code>var list</code>。先从localStorage获取到之前评论数据(string)，转换为一个数组对象，<code>JSON.parse()</code>【从一个字符串中解析出json对象，再<code>localStorage.getItem('cmts')||'[]'</code>
把组织出的最新的评论数据push至list数组如：<code>list.unshift(最新的评论数据)</code>
注：unshift()-----向数组的开头添加一个或多个元素，并且返回新的长度
把第一步得到的评论数据，保存到localStorage中
<code>注：</code>
4.1 localStorage只支持存放字符串数据，要先JSON.stringify。JSON.stringify()【从一个对象中解析出字符串】
4.2 把最新的评论列表数组，存入本地存储localStorage中，首先调用JSON.stringify转为数据字符串【localStorage只支持存放字符串数据】，然后调用localStorage.setItem('','')
父组件把加载评论功能传递给子组件（子组件可以调用父组件函数），点击发表评论，从本地的localStoage中，加载评论列表 <code>$emit()</code>

加载评论列表[父组件]

定义变量<code>var list</code>。先从localStorage获取到之前评论数据(string)，转换为一个数组对象，<code>JSON.parse()</code>【从一个字符串中解析出json对象，再<code>localStorage.getItem('cmts')||'[]'</code>
created()钩子函数开始执行时，从本地的localStoage中取出数据，加载评论列表

代码实现

页面构成

注：这里的样式均引用<code>bootstrap</code>

<div id="app">
    <!--调用定义子组件 && 定义父组件函数-->
    <cmt-box @func="loadComments"></cmt-box>

    <!--评论列表-->
    <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}}
        </li>
    </ul>
    
</div>
<!--子组件：评论人、评论内容以及评论时间-->
<template id="tmp1">
    <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="postComment">
        </div>
    </div>
</template>

数据：

<script>

var commentBox={     //定义子组件
    template:'#tmp1',     //定义子组件模板对象
    data(){
        return {
            user:'',      //评论人 
            content:''    //评论内容
        }
    },
}

var vm=new Vue({   //父组件
    el:'#app',
    data:{
        list:[
            /*假数据*/
            {id:Date.now(),user:'李白',content:'天生我材必有用'},
            {id:Date.now(),user:'江小白',content:'劝君更尽一杯酒'}
        ]
    },
    /*注册子组件*/
    components:{
        'cmt-box':commentBox
    }
    });
</script>

发表评论功能[子组件]

methods:{
    /*点击发表评论按钮触发函数*/
    postComment(){
        /*组织出一个最新的评论数据*/
        var comment={id:Date.now(),user:this.user,content:this.content}

        /*localStorage获取到之前评论数据(string)，转换为一个数组对象*/
        var list=JSON.parse(localStorage.getItem('cmts')||'[]')

        /*把组织出的最新的评论数据push至list数组*/
        list.unshift(comment)

        /*重新保存最新的评论*/
        localStorage.setItem('cmts',JSON.stringify(list))

        /*清空输入框*/
        this.user=this.content=''

        /*子组件调用父组件加载评论列表功能函数*/
        this.$emit('func')
    }
}

localStorage存入效果：[点击f12查看]

localStorage

加载评论列表[父组件]

methods:{
    /*加载评论列表*/
    loadComments(){ 
        /*从本地的localStoage中，加载评论列表*/
        var list=JSON.parse(localStorage.getItem('cmts')||'[]')
        this.list=list
    }
},
/*页面刚加载执行函数*/
created(){
    this.loadComments()
},

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>评论功能</title>
    <script src="vue.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>

<body>
    <div id="app">
        <cmt-box @func="loadComments"></cmt-box>

        <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}}
            </li>
        </ul>
        
    </div>

    <template id="tmp1">
        <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="postComment">
            </div>
        </div>
    </template>
    <script>
        var commentBox={
            template:'#tmp1',
            data(){
                return {
                    user:'',
                    content:''
                }
            },
            methods:{
                postComment(){
                    var comment={id:Date.now(),user:this.user,content:this.content}
                    var list=JSON.parse(localStorage.getItem('cmts')||'[]')
                    list.unshift(comment)
                    localStorage.setItem('cmts',JSON.stringify(list))
                    this.user=this.content=''
                    this.$emit('func')
                }
            }
        }
        var vm=new Vue({
           el:'#app',
           data:{
               list:[
                   {id:Date.now(),user:'李白',content:'天生我材必有用'},
                   {id:Date.now(),user:'江小白',content:'劝君更尽一杯酒'},
                   {id:Date.now(),user:'小马',content:'我姓马，风吹草低见牛羊'}
               ]
           },
           methods:{
               loadComments(){
                 var list=JSON.parse(localStorage.getItem('cmts')||'[]')
                 this.list=list
               }
           },
           created(){
               this.loadComments()
           },
           components:{
               'cmt-box':commentBox
           }
        });
    </script>
</body>

</html>

小结

vue父子组件传函数方法:
- 父组件定义函数---loadComments(){ …… }
- 子组件定义父组件函数方法---@func="loadComments"
- 子组件引用父组件函数方法---this.$emit('func')
H5 localStorage:
- localStorage中一般浏览器支持的是5M大小
- localStorage.setItem("key","value")：存储名字为key的一个值value，如果key存在，就更新value
- localStorage.getItem("key")：获取名称为key的值，如果key不存在则返回null
- localStorage.removeItem("key")：删除名称为"key"的信息，这个key所对应的value也会全部被删除
- localStorage.clear()：清空localStorage中所有信息
JSON.stringify()和JSON.parse()
- JSON.parse(); 将字符串格式转换成JSON对象进行处理
- JSON.stringify(); 将JSON对象转换成字符串格式

来源我的博客：我的博客