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

<!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>

评论

大侠名号:   验证码: 点击我更换图片  

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND