重新梳理了一下，个人认为Vue中组件通信思想与React一致，都是单向数据流，高阶流向低阶(父传子)，子组件只可通知父组件，此时数据还是在父级变更而不是发生流动。

1. props

高频使用

父组件向子组件传递参数。 ​​Vue文档: props​​

2. ​​$emit​​

高频使用

子组件通知父组件执行对应函数，可携带参数。 ​​Vue文档: $emit​​

3. ​​$refs​​

高频使用，也可用在DOM元素操作

通信上属于父组件向子组件传递。通过给子组件设置ref属性，使用 ​​this.$refs​​​ 对象来获取实例，即可直接访问及调用子组件上的属性和方法。 ​​Vue文档: refs​​

4. Vuex 状态管理器

需注意场景使用，可以很好地满足复杂数据交互，在SPA应用中无障碍通信，但频繁使用会增加代码耦合度。

主要以​​State​​​、​​Getters​​​、​​Mutations​​​、​​Actions​​​四个核心组成，约定了对数据的变更只在 ​​Mutations​​​ 中，以 ​​store.commit​​​触发，异步操作则放在 ​​Actions​​​ 中，以 ​​store.dispatch​​​ 触发。 ​​Vuex官网文档​​

5. ​​$root​​​、​​$parent​​​、​​$children​​

不常使用

这三个的作用都直接地体现在字面上。从组件通信层面上讲，用​​$root​​​的场景不如使用Vuex，​​$parent​​​ 用 ​​$emit​​​ 更好，而 ​​$children​​​ 的使用场景几乎没有，毕竟 ​​$refs​​​ 就够用了。 ​​Vue文档: 处理边界情况​​

6. ​​.sync​​修饰符

不推荐使用

在通信方式中的经历最为曲折，曾被无情删除后来又重新添加，实现的是数据在通信中的“双向绑定”，其理念有违组件通信的原则所以不是很推荐使用，原理其实是对​​$emit​​​进行了一层包装，让代码写的更少了而已。 ​​Vue文档: sync-修饰符​​

7. ​​$attrs​​

高阶组件中常用

平时基本不会用到，但在组件颗粒度较细的场景中，以上提到的方式都不能优雅地解决诸如：A组件嵌套了B组件又嵌套了C组件，此时C要与A通信的情形，Vuex会增加代码耦合度得不偿失，​​$root​​​又局限于A组件必须是为根组件，难道只能从A传到B再从B传到C吗？是的，但​​$attrs​​提供了一种传递“剩余参数”的作用，使操作更简便，用一个例子来了解更直观：

// 在 A.vue 中 ：

<template>
    <B name="shawn" id="1" <!-- 向B传递了参数name和id -->
</template>
<script>
import B from './B.vue'
.....

// 在 B.vue 中 ：

<template>
    {{ $attrs }} <!-- 显示： { name: 'shawn', id: '1' } -->
    <C v-bind="$attrs" <!-- 并未定义具体传哪些参数 -->
</template>
<script>
import C from './C.vue'
......
    props: { id } // B中定义了对id的接收，那么就会被$attrs忽略，如果这里没有定义props，那么A传给B的数据会如数传到C那边

// 在 C.vue 中 ：

<template>
    {{ $attrs }} <!-- 显示： { name: 'shawn'

​​Vue文档: attrs​​

8. ​​$listeners​​

高阶组件中常用

和​​$attrs​​​差不多，在上面的例子中往C组件添加属性 ​​v-on="$listeners"​​​ 即可，此时C组件能使用​​$emit​​​调用A组件挂载的对应函数。 ​​Vue文档: listeners​​

9. v-slot插槽

组件化开发中较常用，此时组件中的通信可视为传递了模板代码

注意​​slot​​​和​​slot-scope​​​是Vue早已废除的attribute，与v-slot并不相等。 ​​Vue文档: v-slot​​

10. Event Bus

较少使用

典型的发布订阅模式，我比较喜欢叫它事件广播，用法简单，强在解耦能力。

11. 路由传参

SPA应用中页面跳转可以视为组件变更，所以页面之间的通信也算组件通信了

this.$router.push({
    name: 'xxx', // params传参一定要写name，只写path传参会失败
    params: { /* 目标页面中this.$route.params...来获取 **/ },
    query: { /* 参数写进url中传递，意味着刷新不会丢失 **/

12. provide inject

开发组件库时使用

允许一个祖先组件向其所有子孙后代注入一个依赖，provide向下派发inject用来接收。业务开发中无使用场景。 ​​Vue文档: provide-inject​​