首先定義一個元件（區域性元件）

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