【Vue】子组件调用父组件方法小案例

最新推荐文章于 2023-04-20 10:09:39 发布

KkaBum

最新推荐文章于 2023-04-20 10:09:39 发布

阅读量123

点赞数

本文链接：https://blog.csdn.net/KkaBum/article/details/101470821

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
</head>
<body>
	<div id="app">
		<cmt-box v-on:func = "loadCommnts"></cmt-box> <!-- 子组件调用父组件的方法 -->
		<ul class="list-group">
			<li class="list-group-item" v-for="item in list" v-bind:key = "item.id">
				<span class="badge">评论人：{{item.user}}</span>
				{{item.content}}
			</li> 
		</ul>
	</div>

	<template id="tmp1">
		<div>
			<div class="form-group">
				<label>评论人：</label>
				<input type="text" name="" class="form-control" v-model="user">
			</div>
			<div class="form-group">
				<label>评论内容：</label>
				<textarea type="text" name="" class="form-control" v-model="content"></textarea>
			</div>
			<div class="form-group">
				<input type="button" name="" value="发表评论"  class="btn btn-primary" v-on:click = "postComment">
			</div>
		</div>
	</template>
	<script type="text/javascript">
		
		var commentBox = {
			data:function(){
				return {
					user:"",
					content:""
				}
			},
			template:"#tmp1",
			methods:{
				postComment:function(){
					var comment = {id:Date.now(),user:this.user,content:this.content}

					//从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.loadCommnts()
		 	},
		 	methods:{
		 		// 加载页面的时候从localStorage 中拿数据
		 		loadCommnts:function(){
		 			var list = JSON.parse(localStorage.getItem("cmts") || "[]")
		 			this.list = list
		 		}
		 	},
		 	components:{
		 		"cmt-box":commentBox
		 	}

		 })
	</script>
</body>
</html>

KkaBum

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Vue】子组件调用父组件方法小案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></...
复制链接

扫一扫