Vue父子组件的数据传递

最新推荐文章于 2023-06-08 18:27:47 发布

A cold winter

最新推荐文章于 2023-06-08 18:27:47 发布

阅读量183

点赞数

分类专栏： Vue.js基础文章标签： Vue Javascript

本文链接：https://blog.csdn.net/qq_41611820/article/details/101777059

版权

Vue.js基础专栏收录该内容

20 篇文章 1 订阅

订阅专栏

Vue有一个单项数据流的概念，我们不能对父组件传递过来的属性直接修改，因为一个父组件可能会有多个子组件，这个属性也有很多个子组件在使用，这个子组件修改了会影响另一个子组件。那么我们就是需要对传递过来的属性值进行修改该怎么办呢？我们可以在子组件的data里面定义一个等于它的变量，然后对这个变量进行一系列操作，下面的这些代码也是实现了一个简单的计数器的功能：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>certificate</title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<div id="root">
			<counter :count='5' @increase='handleIncrease'></counter>
			<counter :count='2' @increase='handleIncrease'></counter>
			{{total}}
		</div>  
		<script>
			//定义vue局部组件
			var counter={
				props:['count'],
				template:'<div @click="handleClick">{{number}}</div>',
				data:function(){
					return{
						number:this.count
					}
				},
				methods:{
					handleClick:function(){
						this.number=this.number+2;
						this.$emit('increase',2)
					}
				}
			}
			var vm=new Vue({
				el:"#root",
				components:{
					counter:counter
				},
				data:{
					total:5
				},
				methods:{
					handleIncrease:function(step){
						this.total+=step;
					}
				}
			})
		</script>
	</body>
</html>