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

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

需求

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

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

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

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

示例

1.编写基本页面

页面显示如下：

image-20200212235955097

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

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

image-20200213100323013

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

image-20200213100827965

浏览器显示如下：

image-20200213100857570

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

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​​中。

4.使用v-mode设置评论者以及评论内容

image-20200213211936331

5.设置提交按钮的click事件，打印评论数据

image-20200213213258036

在浏览器查看一下打印出来的数据，如下：

image-20200213213332734

已经可以获取到数据了，下面将其进行存储。

6.将获取的user和comment存储到localStorage中

image-20200213224306551

打开浏览器，查看存储的数据，如下：

image-20200213224404104

7.存储评论内容数据完毕后，清空输入框

image-20200213224706408

好了，这时候已经设置添加好评论内容的数据。下面来看看如何在列表中刷新数据。

8.在父组件编写刷新列表的方法reload_list()，提供子组件进行调用

image-20200213231751135

image-20200213231834548

好了，到这里可以执行父组件的刷新列表方法了，那么下面只要完善刷新列表的方法，对数据进行刷新即可。

9.设置reload_list()读取localStorage数组

image-20200213232906266

10.使用v-for渲染从localStorage读取出来的数组数据

image-20200213233005085

浏览器测试如下：

image-20200213233104901

已经成功可以添加评论以及刷新列表数据了。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。