VUE之组件间的数据传递

VUE是一个轻量级的纯前端框架，它具有组件化开发的特点，即共用模块可以提取出来单独封装为一个组件，并且组件间的数据具有独立性。数据在父子组件之间相互传递，当然，如果需要的话也可以在同级组件之间传递。不过同级组件之间的数据传递相对麻烦一些。

1. 父组件向子组件传递数据
父组件向子组件传递数据时，通过在子组件上自定义属性,如abc，然后属性值为父组件的数据，最后通过子组件的props属性来接收数据。这样就可以在子组件中使用父组件传递过来的数据了。

<div id="app">
	<child :abc="msg"></child>
</div>

<template id="child">
	<p>父组件传递的数据：{
     {
     abc}}</p>
</template>

<script>
	let child= {
     
		template:"#child",
		props:["abc"]
	}
	
	let vue = new Vue({
     
		el: "#app",
		data:{
     
			msg: "父组件数据"
		},
		components:{
     
			child // 在父组件中注册子组件
		}
	});
</script>

2. 子组件向父组件传递数据
子组件向父组件传递数据，首先在子组件上绑定自定义事件，如xyz，自定义事件的执行函数（transferData）为父组件的函数。然后触发子组件的handleClick函数，通过执行this.$emit()来触发自定义事件执行函数的运行，并传递相应的数据。

<div id="app">
	<child :abc="msg" @xyz="transferData"></child>
</div>

<template id="child">
	<div>
		<button @click="handleClick">发送</button>
	</div>
	
</template>

<script>
	let child= {
     
		template:"#child",
		props:["abc"]，
		data:function(){
       
		// 为了保证组件数据的独立性，除了根组件(new Vue({}))外，其余组件的data需使用函数返回对象的形式。
			return {
     
				msg:"子组件的数据"
			}
		},
		methods:{
     
			handleClick:function(){
     
				this.$emit("xyz",this.msg);
			}
		}
	}
	
	let vue = new Vue({
     
		el: "#app",
		data:{
     
			msg: "父组件数据"
		},
		components:{
     
			child // 在父组件中注册子组件
		},
		methods:{
     
			transferData:function(d){
     
				console.log("子组件的数据:"+d);
			}
		}
	});
</script>

3. 同级组件间的数据传递
对于同级组件间数据传递，其实就是借助上面两种传递方式来完成。因此要保证两个同级组件有相同的父组件。即首先将数据传递给父组件，然后通过父组件将数据传递给子组件。具体的代码可以自己去敲一遍。