浅谈Vue中的12种组件通信方式及理解
重新梳理了一下，个人认为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' } -->
</template>
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
