# 组件通信

组件通信一般分为以下几种情况：

• 父子组件通信
• 兄弟组件通信
• 跨多层级组件通信
• 任意组件

对于以上每种情况都有多种方式实现

父子通信

父组件通过props传递数据给子组件，子组件通过emit发送事件传递数据给父组件，这两种方式是最常用的父子通信实现方法。

这种父子通信方式也就是典型的单向数据流，父组件通过props传递数据，子组件不能直接修改props，而是必须通过发送事件的方式告知父组件修改数据。

另外这两种方式还可以使用语法糖v-model来直接实现，因为v-model默认会解析成名字为value的props和名字为input的事件。这种语法糖的方式是典型的双向绑定，常用于UI控件上，但是究其根本，还是通过事件的方法让父组件修改数据。

淡然我们还可以通过$parent或者$children对象来访问组件实例中的方法和数据。

另外，如果使用Vue2.3及以上版本，还可以使用$listeners和.sync这两个属性。

$listeners属性会将父组件中的（不含.native修饰器的）v-on事件监听器传递给子组件，子组件可以通过访问$listeners来自定义监听器。

.sync属性是一个语法糖，可以很简单的实现子组件和父组件通信。

<!--父组件中-->
<input :value.sync="value" />
<!--以上写法等同于-->
<input :value="value" @update:value="v => value = v"></comp>
<!--子组件中-->
<script>
  this.$emit('update:value', 1)
</script>

兄弟组件通信

对于这种情况可以通过查找父组件中的子组件实现，也就是this.$parent.$children，在$children中可以通过组件name查询到需要的组件实例，然后进行通信。

跨多层次组件通信

对于这种情况可以使用Vue2.2新增的APIprovide/inject，虽然文档中不推荐直接使用在业务中，但是如果用的好的话还是很有用的。

假设有父组件A，然后有一个跨多层级的子组件B

// 父组件 A
export default {
  provide: {
    data: 1
  }
}
// 子组件 B
export default {
  inject: ['data'],
  mounted() {
    // 无论跨几层都能获得父组件的 data 属性
    console.log(this.data) // => 1
  }
}

任意组件

这种方式可以通过Vuex或者Event Bus解决，如果不怕麻烦，其实这两种方式可以解决上述所有的通信情况。