41. Vue组件案例-评论列表

需求

为了更好看看父子组件之间的传值，本章来一个评论列表的小案例。

编写这个案例步骤大致如下：

编写一个基本的样式页面，页面内容有两部分：提交评论信息表单、展示评论信息的列表
那么「提交评论信息表单」可以写为一个子组件，而「评论信息列表」为父组件
给「提交评论信息表单」将子组件的评论内容传递到父组件「评论信息列表」
同时，需要写一个存储以及刷新评论信息列表的方法，在子组件提交评论信息之后，子组件还要调用父组件的这个刷新方法。
评论信息的基本存储方式可以用「localStorage」

好了，看到上面几项的需求描述，下面来实现看看。

示例

1.编写基本页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  1.导入Vue.js库  -->
    <script src="lib/vue.js"></script>
    <!--  2.导入bootstrap库  -->
    <link rel="stylesheet" type="text/CSS" href="lib/bootstrap4/bootstrap.min.css">
    <script type="text/Javascript" src="lib/bootstrap4/popper.min.js"></script>
    <script type="text/JavaScript" src="lib/bootstrap4/bootstrap.min.js"></script>
</head>
<body>

    <div id="app">

        <div class="container">

            <!-- 添加评论 start -->
            <div class="row mt-2">
                <!-- 输入评论人 -->
                <div class="form-group row">
                    <label for="input_person" class="col-4 col-form-label">评论人</label>
                    <div class="col-8">
                        <input type="text" class="form-control" id="input_person" placeholder="评论人">
                    </div>
                </div>

                <!-- 输入评论内容 -->
                <div class="form-group row ml-3">
                    <label for="input_content" class="col-4 col-form-label">评论内容</label>
                    <div class="col-8">
                        <input type="text" class="form-control" id="input_content" placeholder="评论内容">
                    </div>
                </div>

                <!-- 提交评论按钮  -->
                <input type="button" value="提交" class="btn btn-primary ml-2 mb-3">

            </div>
            <!-- 添加评论 end -->

            <!-- table列表 start-->
            <div class="row">
                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col">评论人</th>
                            <th scope="col">内容</th>
                            <th scope="col">时间</th>
                            <th scope="col">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <th scope="row">李白</th>
                        <td>床前明月光</td>
                        <td>2020-01-17 12:21:31</td>
                        <td><a href="#">删除</a></td>
                    </tr>
                    <tr>
                        <th scope="row">杜甫</th>
                        <td>疑是地上霜</td>
                        <td>2020-01-16 12:21:31</td>
                        <td><a href="#">删除</a></td>
                    </tr>
                    <tr>
                        <th scope="row">王维</th>
                        <td>黑云压城城欲摧</td>
                        <td>2020-01-17 10:21:31</td>
                        <td><a href="#">删除</a></td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <!-- table列表 end-->

        </div>

    </div>

    <script>
        // 2. 创建一个Vue的实例
        var vm = new Vue({
            el: '#app',
            data: {
            },
            methods:{}
        })
    </script>

</body>
</html>

页面显示如下：

41. Vue组件案例-评论列表 — image-20200212235955097

好了，现在基本页面已经写好了。但是为了演示父组件与子组件之间的传值以及调用关系，我将上面提交评论的部分抽出来作为一个子组件。

2.抽取评论内容作为子组件

上面抽取添加评论内容为一个组件之后，下面来在父组件中使用子组件，如下：

浏览器显示如下：

那么组件显示成功之后，下面就应该实现一下添加评论内容的功能。

3.实现添加评论内容的思路

本次添加评论内容首先需要考虑一个数据的存储，之前的一个示例是直接加入到父组件Vue实例的data中，这个比较简单。

那么本次则试下使用浏览器的「localStorage」来进行数据存储。

那么首先要复习一下「localStorage」的基本用法，如下：

//设置：
localStorage.setItem("dat", "456");
localStorage.dat = '456';

//获取：
localStorage.getItem("dat");
localStorage.dat

//删除
localStorage.removeItem("dat");