一、前言
组件是Vue.js的核心功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。组件间通信就显得至关重要。
组件间的通信分为三种：
- 父组件向子组件通信
- 子组件向父组件通信
- 非父子组件通信
二、父组件向子组件通信
父组件通过属性的方式向子组件传递数据，子组件通过props接收父组件传过来的数据。
Title 复制代码
文档结构：
注意：父组件可以通过属性的方式向子组件传递参数，但是子组件绝对不能直接修改父组件传递过来的数据（单向数据流）。因为对于父组件传递过来的引用数据，子组件若直接修改会对其他组件造成影响。
例：错误写法
Title 复制代码
当点击子组件时，报错！
正确的做法：我们可以在子组件接收父组件传递过来的数据时，将它复制一份（即通过子组件的data函数的实现，返回一个对象），然后修改子组件复制过来的数据。
例：正确写法：
Title 复制代码
这时再点击子组件时不报错的。
三、子组件向父组件通信
1、在子组件上创建一个按钮，绑定一个点击事件。
2、在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数。
3、在父组件的子标签中监听该自定义事件，并添加一个响应该事件的函数。
Title 复制代码总数:{
{total}}
点击+号时，总数+1，点击-号时，总数减1。
总结：无论子组件向父组件传值，还是父组件向子组件传值，他们都有一个共同点就是中间介质，子向父的中间介质是自定义事件，父向子的介质是props中的属性。
四、非父子组件传值
非父子组件的传值有两种方式：1、BUS总线 2、Vuex
1、BUS总线
思想：将事件的分发和监听单独放在一个Vue实例（Bus）中，点击事件时$emit分发一个自定义事件，并为其传递参数，然后$on去监听自定义事件，执行相应的回调函数。
Title 复制代码
未点击时
点击kimi，下面的Yang变成kimi
点击Yang，上面的kimi变成Yang
2、Vuex
2.1什么是Vuex
Vuex是vue.js的状态管理器。如果没有vuex的话，当我们遇到多个视图依赖于同一状态，或者不同视图的行为需要变更同一状态，代码将会非常复杂，难以维护。所以有了Vuex，他把组件的共享状态抽取出来，以一个单例模式管理。
2.2Vuex原理
我们可以把虚线框中的内容理解为一个仓库store，Vuex实现了一个单向数据流，在全局拥有一个State存放数据，所有的共用数据都存在于state中，组件不能直接改变state中的共用数据。它需要走以下的流程：如果有一些异步操作或者是批量的同步操作，可以把这些操作放到actions里面，组件先去调用actions，actions紧接着调用mutations，mutations里面放的是一个一个同步的对state的修改，mutations再去改变state的值。组件也可以直接调用mutations来修改state中的数据。组件通过dispatch方法操作actions，组件调用mutations或者actions调用mutations时，我们都需要用一个commit的方法。
2.3简要介绍各模块在流程中的主要功能：
- Vue Components：Vue组件。HTML页面上，负责接收用户操作等交互行为，执行dispatch方法触发对应action进行回应。
- dispatch：操作行为触发方法，是唯一能执行action的方法。
- actions：操作行为处理模块,由组件中的
$store.dispatch('action 名称', data1)来触发。然后由commit()来触发mutation的调用 , 间接更新 state。负责处理Vue Components接收到的所有交互行为。包含同步/异步操作，支持多个同名方法，按照注册的顺序依次触发。向后台API请求的操作就在这个模块中进行，包括触发其他action以及提交mutation的操作。该模块提供了Promise的封装，以支持action的链式触发。 - commit：状态改变提交操作方法。对mutation进行提交，是唯一能执行mutation的方法。
- mutations：状态改变操作方法，由actions中的
commit('mutation 名称')来触发。是Vuex修改state的唯一推荐方法。该方法只能进行同步操作，且方法名只能全局唯一。操作之中会有一些hook暴露出来，以进行state的监控等。 - state：页面状态管理容器对象。集中存储Vue components中data对象的零散数据，全局唯一，以进行统一的状态管理。页面显示所需的数据从该对象中进行读取，利用Vue的细粒度数据响应机制来进行高效的状态更新。
- getters：state对象读取方法。图中没有单独列出该模块，应该被包含在了render中，Vue Components通过该方法读取全局state对象。
后期理解源码会有更新。
参考：