详解vue中的组件通信的几种方式（一）

 在另一篇文章我们会谈及祖父孙三级之间的通信，传送门：vue组件通信的方式（二）

1.父组件向子组件传值（绑定属性）：

首先我们定义一个父组件father.vue：

[code]<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：

[code]<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空实例

[code]//创建vue空实例
let hub=new Vue()
Vue.prototype.$eventhande = hub //加入vue原型中，让所有组件可以访问到该对象

然后在定义一个兄弟组件brother.vue：

[code]<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