组件是Vue.js强大的功能之一，而组件实例的作用域是相互独立的，那么在开发的过程中，组件与组件之间肯定是相互联系的，那么，组件之间是如何通信的，是如何传递数据的呢？
一: 几种常见的组件
父子组件、兄弟组件、跨级组件；而相应的通信也分为：父子组件通信、兄弟组件通信、跨级组件通信。
那么，针对不同的组件，我们如何进行通信呢？接下来我们来看一下都有哪些组件间的通信方式。
二： 组件间的通信方式
1. 父子组件通信(props/$emit)
a. 父传子 --- 父组件通过props向下传递数据给子组件
父组件通过props的方式来给子组件传值，例子：子组件son.app如何获取父组件App.vue中的数据title和lists，动态传值要结合使用v-bind
// App.vue 父组件
// 1. 给 prop 传递一个静态的值，title 为 prop 的名称(名称为自定义名称)，等号后面的为 prop 要传递的值
// 2. prop 通过 v-bind 动态赋值 , 前者 lists 为自定义名称便于子组件调用，后者 list 为要传递数据名即 data中的 lists
// son.vue 子组件
{{title}} // 渲染从父组件中接收到的数据
- {{list}}
// 遍历传递过来的值，后渲染到页面
b. 子传父
-
通过自定义事件模式
$on和$emit
子组件使用$emit来触发事件，父组件使用$on来监听事件，一旦子组件触发该事件，则父组件就会接收该事件并作出相应处理。类似与JavaScript中的发布订阅模式。
-
vm.$on(evet,callback)- 参数
-
{string | Array(数组只在 2.2.0+ 中支持)} event {Function} callback
-
- 用法
监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。 - 示例：
vm.$on('test', function (msg) { console.log(msg) }) vm.$emit('test', 'hi') // => "hi"
- 参数
-
vm.$emit(evnetname,[...args])- 参数：
{string} eventName-
[...args]
触发当前实例上的事件。附加参数都会传给监听器回调。
- 参数：
下述代码为，子组件son.vue向父组件App.vue传递一个数据
// son.vue 子组件
// msghandle 为自定义事件的名字，msg 为要传递的数据
-
子传父(在组件中使用
v-model)
$emit的代码,这行代码实际上会触发一个 input事件, input后的参数就是传递给v-model绑定 的属性的值, v-model 其实是一个语法糖，这背后其实做了两个操作
-
v-bind绑定一个value属性,v-on指令给当前元素绑定input事件 - 要使用
v-model,要做到：接收一个value属性。 在有新的value时触发input事件
举个例子:
// App.vue
{{message}}
// son.vue
在上面的实例代码中，我们定义了App.vue 和 son.vue 两个组件，这两个组件是父子关系，v-model 也只能实现父子组件之间的通信。
- 在
App.vue组件中，我们给自定义的son组件实现了v-model绑定了message属性。此时相当于给son组件传递了value属性和绑定了input事件。 - 顺理成章，在定义的
son组件中，可以通过props获取value属性，根据props单向数据流的原则，又将value缓存在了data里面的mymessage上，再在input上通过v-model绑定了mymessage属性和一个change事件。当input值变化时，就会触发change事件，处理App.vue组件通过v-model给son组件绑定的input事件，触发App组件中message属性值的变化，完成son子组件改变App组件的属性值。
2. 兄弟组件通信
这种方法通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。当我们的项目比较大时，可以选择更好的状态管理解决方案vuex
- 大致步骤：
const bus = new Vue()
Vue.prototype.$bus = bus
$bus.$emit(事件名,数据);
$bus.$on(事件名,data => {});
- 举个例子
假设兄弟组件有三个，分别是A、B、C组件，C组件如何获取A或者B组件的数据
// 定义中央事件总线，并将中央事件总线挂在 Vue.prototype 上，这样所有组件都能访问到了
// main.js 文件
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
const bus = new Vue()
Vue.prototype.$bus = bus;
new Vue({
render: h => h(App),
}).$mount('#app')
// A.vue 组件A
A组件: {{name}}
// B.vue 组件B
B组件：{{age}}
C组件：{{name}} {{age}}
// App.vue 文件中
在上面的实例中，我们定义了组件 A 和组件 B和组件C，但三个组件之间没有任何的关系。
1)、 首先我们通过 new Vue()实例化了一个 Vue 的实例，也就是我们这里称呼的中央事件总线 bus，然后将其挂载Vue.prototype.$bus，使得所有的业务逻辑组件都能够访问到；
2)、 然后定义了组件 A，在组件 A 里面定义了一个处理的方法 send，主要定义触发一个 data-a 事件，并传递一个参数；然后定义了组件 B，在组件 B 里面定义了一个处理的方法 send，主要定义触发一个 data-b 事件，并传递一个参数；
3). 最后定义了组件 C，在组件 C 里面的 mounted 生命周期监听了组件 A 和组件B里面定义的 data-a和data-b事件，并在回调函数里面执行了一些逻辑处理。
中央事件总线 bus 非常简单，就是任意组件和组件之间打交道，没有多余的业务逻辑，只需要在状态变化组件触发一个事件，然后在处理逻辑组件监听该事件就可以。该方法非常适合小型的项目！
参考资料
- Vue 组件通信方式全面详解
- vue组件间通信六种方式（完整版）