Vue组件之间的几种通信方式

1.父子之间的通信
父子组件通信
1. 父组件中定义一个数据
2. 在父组件的模板中，用 v-bind 将父组件的数据绑定在子组件身上

3. 在子组件的选项中，通过props选项来接收这个属性
4. 这个属性可以在子组件的模板中以全局变量的形式使用
总结：父子之间的通信主要是通过props来实现的，父组件通过v-bind绑定数据，然后子组件通过props拿到数据
扩展：props是可以做数据验证的（不符合直接报错）

//父组件

<template id="father">
<div>
<h3> 这里是父组件 </h3>
<hr>
<Son :aa = "money"></Son>
</div>
</template>

//子组件

<template id="son">
<div>
<h4> 这里是子组件 </h4>
<p> 老爸给了我  {{ aa }} 生活费 </p>
</div>
</template>

Vue.component('Father',{
template:'#father',
data(){
return{
money:1000
}
}
})
Vue.component('Son',{
template:'#son',
props:['aa'],// prop 可以通过 v-bind 动态赋值
props:{//用于判断拿到的值得类型
'aa':Number,
},
props:{//用于判断aa的数值大小或者范围，若错误则直接报错不输出
'aa':{
validator(val){//验证数据
return val===1000
}
}
}
})

2.子父之间的通信
vue是单向数据传递的，如果子组件直接改变父组件传过来的数据是不允许的。但是可以通过触发事件通知父组件改变数据，实现改变子组件的目的。
总结：子父通信主要是this.$emit和子组件上绑定的处理函数

1. 给子组件中定义一个数据

   这是子级数据

3.非父子组件之间的通信
（一）非父子组件之间的通信是通过在简单的场景下，可以使用一个空的 Vue 实例作为事件总线。原理就是把 Vue 实例当作一个中转站。
使用一个空的 Vue 实例作为事件总线

var bus = new Vue()

一个字组件的操作使用挂载方法自定义执行（mounted），只要组件创建，它就自动执行
通过$on自定义一个aa的事件，传递数据给另一个字组件

Vue.component('Son',{
template: '#son',
data () {
return {
flag: false
}
},
methods: {
cry () {
this.flag = true
}
},
mounted () { //这个选项表示组件挂载结束   这个方法时自定执行，只要组件创建，它就自动执行
// bus.$on(自定义事件的名称，自定义事件的处理程序)
var  _this = this
bus.$on('aa',function () { // 通过$on自定义一个叫做aa的事件
_this.cry()
})
}
})

操作的子组件通过bus.$emit()来获取aa事件

Vue.component('Girl',{
template: '#girl',
methods: {
kick () {
bus.$emit('aa')
}
}
})

（二）该非父子通信利用一个子级将事件传给父级，然后父级将返回值给需要操作的另一个子级，从而俩个子级进行通信了

核心：父级的kit方法给了操作的子组件

<template id="father">
<div>
<h3>这是父级组件</h3>
<!-- <button @click="print">输出this</button> -->
<boy :fn="kit"></boy>
<!-- 在父级中拿到另一个子组件的操作方法 -->
<hr>
<girl ref="girl"></girl>
</div>
</template>

父级组件作为中转站，拿到一个子组件的方法然后给另一个操作的子组件

Vue.component('Father',{
template:'#father',
methods: {
print(){
console.log(this)
},
kit(){
this.$refs.girl.cry()//父级拿到操作一个子组件的方法，然后另一个子组件对其进行操作
}
},
})

操作的子组件

Vue.component('Boy',{
template:'#boy',
props:['fn'],//通过props拿到父级定义的方法
})

被操作子组件

Vue.component('Girl',{
template:'#girl',
data(){
return {
flag:false,
}
},
methods:{
cry(){
this.flag=!this.flag
}
},
})