Vue组件间通信方式
组件可以封装一些重用的代码，通过传入不同的数据，实现组件的复用。组件之间传递数据基本上可以分为三种：父子组件、兄弟组件、隔代组件（跨组件），针对不同场景，我们可以选择不同的方式，具体如下：
父子组件通信：
（1）props/$emit
父组件通过自定义属性传递数据，子组件通过props来接收;
子组件通过emit传递一个自定义事件，父组件通过自定义事件来操作相应的逻辑：
父组件：
{
{btnContent}}
-
（2）$parent/$children
子组件通过$parent访问父组件实例；父组件通过$children访问子组件实例：
父组件：
{
{ title }}
{
{btnContent}}
-
（3）ref
如果用于dom元素上，指的是DOM元素；如果用于子组件上，就指向子组件实例：
父组件：
个人信息
兄弟组件通信：
（1）先子传父，再父传子
（2）借助中央事件总线 EventBus（详见下方）
隔代组件通信：
（1）$attrs/$listeners
$attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 interitAttrs 选项一起使用。$listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件
父组件：
个人信息
（2）provide/inject
祖先组件通过provider来提供变量，然后子孙组件中通过inject来注入变量；主要用于子组件获取上级组件的状态，跨级组件建立了一种主动提供与依赖注入的关系。
父组件：
个人信息
父组件通过依赖注入赋予的值是：{
{ name }}
适用于父子、隔代、兄弟组件通信：
（1）EventBus ($emit / $on)：通过创建空的Vue实例作为中央事件总线（事件中心），用它来监听和触发事件：
具体用法：
1、创建一个bus.js文件，该文件中引入vue，并导出vue实例，代码如下：
import Vue from 'Vue';export default new Vue;
另外一种方式：
直接在main.js中初始化：Vue.prototype.$EventBus = new Vue()
2、在需要通信的组件中引入bus.js,代码如下：
import Bus from './bus.js'
3、传递数据的组件中通过$emit方法发送事件名称和传递需要的数据，代码如下：
Bus.$emit('click',data) click是自定义事件名称，data为传输的数据
4、 接收数据的组件通过$on监听事件并接收数据，这个方法通常挂载在created和mounted中：
Bus.$on(’click' target)用于监听事件和接收数据，target为获取的数据。
5、清除事件总线eventBus,在beforeDestory或者destroyed中清除。
beforeDestory() {Bus.$off('click')用于清除eventBus}
（2）Vuex 状态管理
1、原理：
Vuex实现了一个单向数据流，在全局拥有一个State存放数据，当组件要更改State中的数据时，必须通过Mutation进行，Mutation同时提供了订阅者模式供外部插件调用获取State数据的更新。而当所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作需要走Action，但Action也是无法直接修改State的，还是需要通过Mutation来修改State的数据。最后，根据State的变化，渲染到视图上。
2、各个模块功能：
Vue Components: Vue组件，主要在页面上负责接收用户操作等交互行为，通过执行dispatch方法来触发相对应的action进行回应。
dispatch: 操作触发action中的方法，是唯一能够执行action的方法。
actions: 操作行为处理的模块，负责Vue Components中所有交互行为（如：操作事件和方法），由组件中通过this.$dispatch('action 名称'， data)来触发，然后由commit()来触发mutation的调用来间接更新state。
commit:状态改变操作方法，对mutation进行提交，是唯一能执行mutation的方法。
mutations: 状态改变操作方法，由action中的commit('mutation名称’）来触发。该方法只能进行同步操作。
state: 页面状态管理容器，集中存储一些公用的数据。
getters：通过该方法读取state中的数据。