Vue入门—父子组件的数据传递

最新推荐文章于 2022-06-24 11:08:46 发布

婧大

最新推荐文章于 2022-06-24 11:08:46 发布

阅读量239

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_45678607/article/details/105538657

版权

Vue—父子组件的数据传递

最近在学习Vue，还是个小白入门级，这也是我学习完的笔记吧，有描述不当，希望指正。
好了，下面跟我一起学习吧。

我学习的这节课，它是以计数器counter来讲解，父子组件的数据传递

首先最原先的创建的基础代码如下，有一个父组件

<body>
		<div id="root"></div>
		<script>
			var vm = new Vue({
				el:'#root'
			})
		</script>
</body>

之后我们在其基础上创建一个叫counter的子组件,并在父组件中使用这个子组件，由于它是一个局部组件，所以我们需要通过注册这个组件，写一个对象counter。之后我们在父组件的模板里面使用这个counter

<body>
		<div id="root">
			<counter></counter>
			<counter></counter>
		</div>
		<script>
		    var counter = {
		    template: '<div>0</div>',
			}
			var vm = new Vue({
				el:'#root',
				components:{
					counter:counter    
				}
				
			})
		</script>
</body>

输出结果为 0 0

父组件通过属性来像子组件传值

<counter :count="3"></counter>
<counter :count="2"></counter>

这里说明一下

：count=“3”此时的3表示的是一个数字
count=“3”此时的3表示的是一个字符串
这里是因为，当你前面加了：，此时“”里面的则是一个js的表达式，数字类型

子组件接受：

props: ['count'],

此时我们可以在子组件的模板里面接受，使用这个count值

template: '<div>{{count}}</div>',

此时我们可以在页面输出结果为 3 2

之后我们来完成一下，这个计数器，子组件累加部分，实验累加，首先我们在count数据上绑定点击事件，

template: '<div @click="handleClick">{{number}}</div>',

当然我们也要写上它实现的方法，既然要实现累加，用以下的方法this.count ++,可以吗？

methods: {
					handleClick:function(){
						this.count ++	
					}
				}

当你运行在页面后，确实是可以实现点击数字累加的效果，但是当我们打开控制台，Vue此时会报一个警告，告诉我们不能直接修改父组件传递过来的数据

在Vue中，有一个单向数据流的说法，，也就是，父组件可以向子组件传递参数，通过属性的方式传值，而且传递的参数也可以随便修改，这个没有问题。但是子组件绝对不能反过来修改父组件传递过来的这个数据。

之所以Vue中有这个单向数据流，是因为一旦子组件接收的数据不是一个基础类型的数据，而是类似于一个对象类型的数据，这样的话，如果你在子组件里改变了这个对象的数据，但同时这个对象还被其他的子组件使用，这样的话，你的这个子组件改的数据，不仅仅会影响你这个子组件，同时还会影响其他的子组件。

但是在我们这里，我是需要改变子组件的数据，当然也是有方法。
此时我们需要在子组件中写一个data，而这个data里面是一个函数，返回一个对象

data: function(){
					return {
						number:this.count
					}
				},

也就是我从父组件里面传过来的数据count，我把它复制一份放在我子组件的data里面
同时我们下面使用的均为number

var counter = {
				props: ['count'],
				data: function(){
					return {
						number:this.count
					}
				},
				template: '<div @click="handleClick">{{number}}</div>',
				methods: {
					handleClick:function(){
						this.number ++
						
					}
				}
			}

到页面刷新，我们可以实现点击数字累加，同时控制台也不会报错到这里我们完成了两个点击后可以累加的数字，但是我们还要实现的是，能求出它们的和，所以继续吧。
接下来我们是学习子组件如何向父组件传值。

首先在父组件中，我们展示一个div，里面展示的total表示的是前面两个count的和

<div>{{total}}</div>

所以我们需要定义Vue的根实例中的data（在上面在子组件中的data我们使用的是函数，在这里我们可以直接定义）

data: {
			total: 5
	},

可是如果这样，我们会发现，total数据被写死了，但是我们的count是变化的（数据冗余）
我们需要子组件在改变数据的时候，向父组件传递内容，这里我们通过事件的形式来进行传值。
在子组件数据被点击的时候，我们通过this.$emit(‘change’，1)来触发一个change事件，同时它后面携参数.例子如下：
数加一

methods: {
					handleClick:function(){
						this.number ++;
						this.$emit('change',1)
						
					}
				}

数加2

methods: {
					handleClick:function(){
						this.number = this.number + 2;
						this.$emit('change',2)
						
					}
				}

到这里，子组件已经通过事件触发的方式完成了向外触发，父组件则可以实现监听子组件传递过来的事件（change是一个事件名字，你可以自取）

<div id="root">
			<counter :count="3" @change="handleIncrease"></counter>
			<counter :count="2" @change="handleIncrease"></counter>
			<div>{{total}}</div>
		</div>

当change事件被触发，则执行handleIncrease方法
定义方法（根实例中）

methods:{
					handleIncrease: function(step){
						this.total += step
					}
				}

进行到这里，我们到页面刷新，既可以实现点击count累加，同时我们的total 也会随count的改变而改变。

代码不难，只是正在学习，想记录一下。
你也可以尝试一下哦。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>父子组件的数据传递</title>
		<script src="./vue.js"></script>
	</head>
	<body>
		<div id="root">
			<counter :count="3" @inc="handleIncrease"></counter>
			<counter :count="2" @inc="handleIncrease"></counter>
			<div>{{total}}</div>
		</div>
		
		<script>
			var counter = {
				props: ['count'],
				data: function(){
					return {
						number:this.count
					}
				},
				template: '<div @click="handleClick">{{number}}</div>',
				methods: {
					handleClick:function(){
						this.number = this.number + 2;
						this.$emit('inc',2)
						
					}
				}
			}
			
			
			var vm = new Vue({
				el:'#root',
				data: {
					total: 5
				},
				components:{
					counter:counter    
				},
				methods:{
					handleIncrease: function(step){
						this.total += step
					}
				}
			})
		</script>
	</body>
</html>