vue父子传值小demo

最新推荐文章于 2023-07-07 19:25:45 发布

w晚风

最新推荐文章于 2023-07-07 19:25:45 发布

阅读量115

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/m0_52469153/article/details/109641032

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

子传父

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<div id="app">
			<div>{{name}}</div>
                        <!--
				注意@:name_s="getname" 的函数不能写括号  也不能传参
			-->
			<mycom @name_s="getname"></mycom> 
		</div>
	</body>
	<script type="text/javascript">
		var app=new Vue({
			el:"#app",
			data:{
				name:'父组件的值'
			},
			methods:{
				//子组件传过来的值改变父组件里的值
				getname:function(name_){
					this.name=name_;
					console.log(2);
				}
			},
			//子组件
			components:{
				'mycom':{
					template:"<div>{{name}}<button @click='fn'>点击</button></div>",
					data:function(){
						return{
							name:"子组件值"
						}
					},
					methods:{
						fn:function(){
							//这里的字传父利用vue的emit事件来去往回传值
							//第一个参数是自定义标识符字符串
							//第二个参数表示要往回发送的数据
							this.$emit('name_s',this.name);
							console.log(1);
						}
					}
				}
			}
		})
	</script>
</html>

子传父

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<div id="app">
			<div>{{name}}</div>
			<mycom :my_com="title"></mycom>
		</div>
	</body>
	<script type="text/javascript">
		var app=new Vue({
			el:"#app",
			data:{
				name:'父组件的值',
				title:"你好"
			},
			//子组件
			components:{
				'mycom':{
					template:"<div>{{name}},父组件传过来的值:{{my_com}},{{my_com}}</div>",
					props:['my_com'],
					data:function(){
						return{
							name:"子组件值"
						}
					}
				}
			}
		})
	</script>
</html>