Vue把父组件的方法传递给子组件调用(评论列表例子)
效果展示:
相关Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue-2.4.0.js"></script>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
<style>
</style>
</head>
<body>
<div id="app">
<cmt-box @func="loadComments"></cmt-box>
<ul class="list-group" v-for="item in list" :key="item.id">
<li class="list-group-item">
<span class="badge">评论人:{{item.user}}</span>
{{item.content}}
</li>
</ul>
</div>
<template id="temp1">
<div>
<div class="form-group">
<span>评论人:</span>
<input type="text" class="form-control" v-model="user">
</div>
<div class="form-group">
<span>评论内容:</span>
<input type="text" class="form-control" v-model="content">
</div>
<div class="form-group">
<input type="button" value="发表评论" class="btn btn-primary"
@click="postComment"
>
</div>
</div>
</template>
<script>
var commentBox = {
data: function () {
return {
user: '',
content: ''
}
},
template: '#temp1',
methods: {
postComment: function () {
// 分析发表评论的业务逻辑
// 1.评论数据存到哪里去 存到本地
// 2.先组指出一个最新的评论数据对象
//3.想办法把第二步中得到的评论对象 保存到localStorage
// 3.1本地 只支持存放字符串数据 要先掉JSON.stringify
// 3.2在保存最新的评论数据之前,先从localStorage获取之前的评论数据 转换为一个数组对象
// 然后把最新的评论 push到这个数组
// 3.3如果获取的localStorage中评论字符串 为空不存在 则可以返回空'[]' 让JSON.parse()去转换
// 3.4 把最新的评论列表数组 再次调用JSON.stringify转为数组字符串 最后localStorage.setitem
var comment = {id: Date.now(), user: this.user, content: this.content};
console.log(this.user);
//这个是从localStorage中 获取所有的评论
var list = JSON.parse(localStorage.getItem('cmts') || '[]');
list.unshift(comment);
//重新保存最新的评论数据
localStorage.setItem('cmts', JSON.stringify(list));
this.user = this.content = '';
this.$emit('func');
}
}
}
var vm = new Vue({
el: '#app',
data: {
list: [
{id: Date.now(), user: '李白', content: '天成我材必有用'},
{id: Date.now(), user: '江小白', content: '劝君更尽一杯酒'},
{id: Date.now(), user: '小马', content: '我姓马,风吹草低见牛羊'}
]
},
created:function () {
this.loadComments();
},
methods: {
loadComments: function () {//从localStorage中加载评论
var list = JSON.parse(localStorage.getItem('cmts') || '[]');
this.list = list;
}
},
components: {
'cmt-box': commentBox
}
});
</script>
</body>
</html>