重新梳理了一下，个人认为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提供了一种传递“剩余参数”的作用，使操作更简便，用一个例子来了解更直观：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 在 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' } -->
</template>

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应用中页面跳转可以视为组件变更，所以页面之间的通信也算组件通信了

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

12. provide inject

开发组件库时使用

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