Vue父子组件传值与评论功能实现-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42853241/article/details/98650317

目标：主要练习父子组件之间传值
实现功能：发表评论、本地存储、显示列表

页面加载，从本地localStorage中获得数据
子组件中，获取原数据，添加新数据，加入到localStorage
点击发表评论时，调用第二步定义的方法，重新加载数据

借助bootstrap页面布局，包含评论人、评论内容、提交按钮以及评论列表
定义子组件，子组件包含了评论人、评论内容、提交按钮
页面加载：
+ methods定义方法：获得localStorage中的数据，转为数组对象，置为父组件中data定义的list，借助v-for循环输出
+ 需要思考该方法何时调用，在那里调用（生命周期函数）
当点击提交按钮时，
+ 先从localStorage中获取数据localStorage.getItem('cmts')
+ localStorage 只支持存放字符串数据，所以我们需要调用JSON.parse将字符串转为数组对象，这里就需要注意，localStorage列表可能为空或者不存在，那我们就需要转为一个空数组，而不是null，所以我们可以返回一个[]
+ 将input框内的数据保存为一个对象，添加至获得的数组对象中，需注意，评论列表最新评论置于最上处，所以添加方法为unshift
+ 之后我们需要将最新的数组对象存入localStorage中，但是 localStorage 只支持存放字符串数据，所以，调用JSON.stringify将数组对象转为字符串数据，调用localStorage.setItem保存至localStorage，最后将input框置为空
+ 子组件绑定父组件方法this.$emit，当点击评论时，页面重新加载数据，调用父组件定义的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue-2.4.0.js"></script>
    <link rel="stylesheet" href="lib/bootstrap-3.3.7.css">
</head>
<body>
<div id="app">
    <com @func="loadComments"></com>
    <ul class="list-group">
        <li class="list-group-item" v-for="item in list">
            <span class="badge">{{item.user}}</span>
            {{item.content}}
        </li>
    </ul>
</div>
<template id="tmpl">
    <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="addList">
        </div>
    </div>
</template>
</body>
<script>
    var com={
        data:function(){
            return {
                user:'',
                content:''
            }
        },
        template:'#tmpl',
        methods:{
            addList(){
                var list=JSON.parse(localStorage.getItem('cmts')||'[]');
                var comment={id:Date.now(),user:this.user,content:this.content};
                list.unshift(comment);
                localStorage.setItem('cmts',JSON.stringify(list));
                this.user=this.content='';
                this.$emit('func');
            }
        }
    };
    var vm=new Vue({
        el:'#app',
        data:{
            list:[]
        },
        created(){
            this.loadComments()
        },
        methods:{
            loadComments(){
                var list=JSON.parse(localStorage.getItem('cmts')||'[]');
                this.list=list;
            }
        },
        components:{
            com
        }
    })
</script>
</html>

Vue案例—评论列表