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

Devops海洋的渔夫

发布于 2020-07-20 09:45:25

2.1K0

发布于 2020-07-20 09:45:25

文章被收录于专栏：Devops专栏Devops专栏

需求

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

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

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

页面显示如下：

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

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

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

浏览器显示如下：

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

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

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

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

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

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

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

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

好了，知道了基本用法，下面就要存储一下评论内容到localStorage中。

实现思路：

首先组件设置data参数：评论者user和评论内容comments，使用v-model绑定两个文本框的值，然后给添加按钮设置click方法，在方法中将user 和comments存储到localStorage中。