vue组件通信有多种方式，最近看了一篇文章总结的很到位，所以自己也总结一下，以后工作会用到。
1.父到子通信props，这也是用的最常用的。在父组件中绑定props，在子组件中使用。
子组件的
props可以是一个数组，也可以是一个对象，如果是一个对象可以设置默认值和数据类型。
这样的有一个缺点就是子组件的后代组件不会继承props，需要在子组件再绑定一个props传递给子组件的后代。
父组件
<Home :title="title"></Home>
子组件
props:['title'],
或
props:{
title:{
type:String,
default:'111'
}
}，
mounted(){
console.log(this.title)
}
2.子到父$emit，通过$emit操控父组件里面的方法，也可以传参
如果传递多个参数可以使用对象的形式
父组件
<Home @change="change"></Home>
<script>
exprot default:{
methods:{
change(){
alert('change')
}
}
}
</script>
子组件
mounted(){
this.$emit('change',data)
}
3，父到子通信ref，通过ref可以拿到子组件的所有属性和方法。
操作
ref会和v-if有冲突，可以使用v-show替代，必须在dom更新之后操作，否则会报错，也就是在this.$nextTick中操作。
父组件
<Home ref="show"></Home>
mounted(){
console.log(this.$refs.show.name);
this.$refs.show.init();
}
子组件
data(){
name:'today'
},
methods:{
init(){
this.name="hehhe"
}
}
4，子到父通信$parent，通过$parent可以拿到直系父组件的所有的方法和属性。
如果子组件被多个父组件引用，使用
$parent的时候需要自己判断
父组件
<Home ref="show"></Home>
data(){
name:'today'
},
methods:{
init(){
this.name="hehhe"
}
子组件
mounted(){
console.log(this.$parent.name);
this.$parent.init();
}
5，子到父通信$listeners，这个的使用方法和$emit差不多，也是需要在父组件中先绑定事件，然后在子组件通过this.$listeners得到所有绑定的事件名，直接调用就好了；
这种调用方式也是可以传参的
父组件
<Home @change="change"></Home>
methods:{
change(a){
alert(a)
}
}
子组件
mounted(){
this.$listeners.change(123)
}
6，父子通信provide和inject，provide 和inject主要为高阶插件组件库提供用例。并不推荐直接用于应用程序代码中; 并且这对选项需要一起使用。只要在第一级别的组件注册provide，所有的后代都会继承，都能够访问。
父组件
data:{
return{
name:"today"
}
}
provide(){
return {
value:this.name
}
},
子组件
inject:["value"],
mounted(){
console.log(this.value)
}
孙子组件
inject:["value"],
mounted(){
console.log(this.value)
}
还有一些别的通信方式但是使用的不太多sync,$children
