在另一篇文章我們會談及祖父孫三級之間的通訊，傳送門：vue元件通訊的方式（二）

1.父元件向子元件傳值（繫結屬性）：

首先我們定義一個父元件father.vue：

<template>
	<div>
		<h1>父元件</h1>
		<p>{{mydata}}</p>
		<hr/>
		<!--向子元件傳值：繫結屬性tosondata，father為傳入的值-->
		<son :tosondata="father" @getdata="getsondata"></son>
		<!--接收子元件的傳值：通過子元件觸發getdata事件，父元件在getsondata事件中接收-->
		<hr/>
		<brother></brother>
	</div>
</template>

<script>
	import son from './son.vue'
	import brother from './brother.vue'
	export default{
		data(){
			return{
			father:"我是父元件的資料,已經接收到了",
			mydata:''
			}
		},
		components:{
			son,
			brother
		},
		methods:{
			getsondata(value){
//				接收子元件傳入的值value
				this.mydata=value
			}
		}
	}
</script>
 

子元件son.vue：

<template>
	<div>
		<h1>子元件</h1>
		<p>{{tosondata}}</p>
		<h2>{{mydata1}}</h2>
		<button @click="btn">摁我傳值父元件</button>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				sonmsg:'我是子元件的資料',
				mydata1:''
			}
		},
	    props:{
	    	tosondata:String
	    },
		methods:{
			btn(){
//				觸發getdata事件,傳入sonmsg值
				this.$emit('getdata',this.sonmsg)
			}
		},
		created(){
// 監聽兄弟元件的自定義事件，並接受傳入的值
			this.$eventhande.$on('change',(val)=>{
				this.mydata1=val
			})
		}
	}
</script>
 

2.子元件向父元件傳值（$emit觸發自定義事件）,如上圖

3.兄弟元件傳值（定義一個vue空例項作為橋樑）：

首先我們在main.js中定義vue空例項

//建立vue空例項
let hub=new Vue()
Vue.prototype.$eventhande = hub //加入vue原型中，讓所有元件可以訪問到該物件

然後在定義一個兄弟元件brother.vue：

<template>
	<div>
		<h1>我是子元件的兄弟元件</h1>
		<button @click="todata">摁我傳值給兄弟元件</button>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				brotherdata:"我是傳給兄弟元件的資料"
			}
		},
		methods:{
			todata(){
//				觸發自定義事件change,傳入brotherdata值
				this.$eventhande.$emit('change',this.brotherdata)
			}
		}
	}
</script>
 

然後我們在另外一個兄弟元件接受該值就OK了，如圖1和圖2的father.vue,和son.vue