Vue组件之间的通信有哪些？简单来说，组件之间的通信就是组件之间传递数据来达到某个目的。每个组件之间的都有独自的作用域，

简单来说，组件之间的通信就是组件之间传递数据来达到某个目的。每个组件之间的都有独自的作用域，组件间的数据是无法共享的但实际开发工作中我们常常需要让组件之间共享数据，这也是组件通信的目的要让它们互相之间能进行通讯，这样才能构成一个完整系统。

那么组件之家的通信分类有哪些呢？

（1）父子组件之间的通信

第一、props父子组件的值传递，使用场景：父组件给子组件传递数据，设置props属性来接受父组件传递过来的值或者变量。父组件在使用子组件标签中通过字面量来传递值，或者v-bind绑定变量传值

child.vue

props:{  
    // 字符串形式  
 name:String // 接收的类型参数  
    // 对象形式  
    age:{    
        type:Number, // 接收的类型为数值  
        defaule:18,  // 默认值为18  
       require:true // age属性必须传递  
    }  
}

parent.vue

<child age=22 />
//如果传递的是一个变量,那么使用v-bind绑定来进行传递，具体如下：
<child :age="age" />
data(){
  return {
     age:0
  }
},
created(){
    this.getData()
},
methods:{
   getData(){
      getData().then(res=>{
          this.age = res.data.age  
      })
   }
}

第二、$emit触发自定义事件

使用场景：子组件传递数据给父组件

说明：子组件通过 $emit自定义事件，$ emit的第二个参数是传递的数值，父组件绑定监听器获取到子组件传递过来的参数。

child.vue

this.$emit('ItemClick',index)

parent

<child @ItemClick="TopClick(index)">
methods:{
   TopClick(index){
      .....
   }
}

第三、使用ref

使用场景：父组件在使用子组件的时候设置ref

父组件通过设置子组件ref来获取数据

父组件parent.vue

<child ref="child">

methods:{
   getChild(){
      this.$refs.child
   }
}

（2）兄弟组件之间的通信

第一、 $parent或者$ root搭建通信桥梁

兄弟组件

this.$parent.on('add',this.add)

另一个兄弟组件

this.$parent.emit('add')

第二、使用事件总线EventBus

使用场景:兄弟组件之间的传值

创建一个中央事件总线EventBus

兄弟组件通过 $emit触发事件自定义事件，$ emit第二个参数为传递的数值

另一个兄弟组件通过$on来监听自定义事件

child1.vue

this.$bus.$emit('foo')

child2.vue

this.$bus.$on('foo',this.handle)

（3）祖孙与后代之间的通信

第一、provide 与inject

在祖先组件中定义provide属性，返回传递的值

在后代组件中通过inject来接受组件传递过来的值

祖先组件

provide(){
  return {
     age:20
  }
}

后代组件

inject:['age']

第二、 $attrs和$ listeners

适用场景：祖先传递数据给子孙
设置批量向下传属性$attrs和 $listeners
包含了父级作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( class 和 style 除外)。
可以通过 v-bind="$attrs" 传⼊内部组件

//前提是age没有在props中声明
<p>{{$attrs.age}}</p>

（4）非关系组件之间的通信

vuex适用于复杂关系的组件数据传递

Vuex相当于是一个存储共享变量的一个容器

state用来存放共享变量的地方
getter，可以增加一个getter派生状态，(相当于store中的计算属性），用来获得共享变量的值
mutations用来存放修改state的方法。
actions也是用来存放修改state的方法，不过action是在mutations的基础上进行。常用来做一些异步操作

总结

父子关系的组件数据传递选择 props 与 $emit进行传递，也可选择ref
兄弟关系的组件数据传递可选择$bus，其次可以选择$parent进行传递
祖先与后代组件数据传递可选择attrs与listeners或者 Provide与 Inject
复杂关系的组件数据传递可以通过vuex存放共享的变量

Vue组件之间的通信有哪些？