为了更好看看父子组件之间的传值,本章来一个评论列表的小案例。
编写这个案例步骤大致如下:
好了,看到上面几项的需求描述,下面来实现看看。
<!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>
页面显示如下:
好了,现在基本页面已经写好了。但是为了演示父组件与子组件之间的传值以及调用关系,我将上面提交评论的部分抽出来作为一个子组件。
上面抽取添加评论内容为一个组件之后,下面来在父组件中使用子组件,如下:
浏览器显示如下:
那么组件显示成功之后,下面就应该实现一下添加评论内容的功能。
本次添加评论内容首先需要考虑一个数据的存储,之前的一个示例是直接加入到父组件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
中。
在浏览器查看一下打印出来的数据,如下:
已经可以获取到数据了,下面将其进行存储。
打开浏览器,查看存储的数据,如下:
好了,这时候已经设置添加好评论内容的数据。下面来看看如何在列表中刷新数据。
在浏览器点击提交按钮,查看是否触发父组件的reload_list方法,如下:
好了,到这里可以执行父组件的刷新列表方法了,那么下面只要完善刷新列表的方法,对数据进行刷新即可。
浏览器测试如下:
已经成功可以添加评论以及刷新列表数据了。