Vue 组件 父子组件间的数据传递

首先定义一个组件（局部组件）

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

父组件向子组件传递数据 —— 通过属性

下面，父组件通过count 属性向子组件中传递了一个数字，同时子组件接收该属性

	<div id="root">
		<counter :count="1"></counter>
		<counter :count="2"></counter>
	</div>
	<script>
		// 局部组件
		var counter = {
			props: ["count"],
			template: "<div>{{count}}</div>"
		}
		var vm = new Vue({
			el: "#root",
			components: {
				counter: counter
			}
		})
	</script>

Vue 中有“单向数据流”概念。父组件可以向子组件中通过属性方式传递数据并修改数据，但子组件不可以修改该数据。

那么如何获得父组件的数据并修改呢？

将父组件的值赋值给子组件的data中的数据即可，如下。

	<div id="root">
		<counter :count="1"></counter>
		<counter :count="2"></counter>
	</div>
	<script>
		// 局部组件
		var counter = {
			props: ["count"],
			template: "<div @click='handleClick'>{{number}}</div>",
			data: function(){
				return {
					number: this.count
				}
			},
			methods: {
				handleClick: function(){
					this.number ++ ;
				}
			}
		}
		var vm = new Vue({
			el: "#root",
			components: {
				counter: counter
			}
		})
	</script>

子组件向父组件中传数据 —— 事件触发的方式

如下。

	<div id="root">
		<counter :count="0" @change="handlechange"></counter>
		<counter :count="0" @change="handlechange"></counter>
		<div>{{total}}</div>
	</div>
	<script>
		// 局部组件
		var counter = {
			props: ["count"],
			template: "<div @click='handleClick'>{{number}}</div>",
			data: function(){
				return {
					number: this.count
				}
			},
			methods: {
				handleClick: function(){
					this.number ++ ;
					this.$emit("change", 1);
				}
			}
		}
		var vm = new Vue({
			el: "#root",
			data: {
				total: 0
			},
			components: {
				counter: counter
			},
			methods: {
				handlechange: function(step){
					this.total += step;
				}
			}
		})
	</script>