vue $emit 子组件向父组件发送数据

投稿人：在云端 2018-03-20

分类 :vue vue1 总分类 :网站阅读 : 0条评论

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="lib/vue1.min.js"></script>
	</head>
	<body>
		<div id="box">
			<aaa></aaa>
		</div>
		<template id="aaa">
			<span>我是父级 -> {{msg}}</span>
			<bbb @child-msg="get"></bbb>
		</template>
		<template id="bbb">
			<h3>子组件-</h3>
			<input type="button" value="send" @click="send"/>
		</template>
		<script>
			var vm=new Vue({
				el:'#box',
				data:{
					a:'aaa'
				},
				components:{
					'aaa':{
						data(){
							return{
								msg:111,
								msg2:'我是父组件的数据'
							}
						},
						template:'#aaa',
						methods:{
							get(msg){
								this.msg = msg;
							}
						},
						components:{
							'bbb':{
								data(){
									return{
										a:'我是子组件的数据'
									}
								},
								template:'#bbb',
								methods:{
									send(){
										this.$emit('child-msg',this.a);
									}
								}
							}
						}
					}
				}
			})
		</script>
	</body>
</html>

下一篇：vue slot将原标签数据同样保留下来

上一篇：vue中在组件内定义组件