在现代的前端构架中，整个页面由多个小的组件组成。每个组件有单独的功能与UI。基于组件的架构使得整个应用的开发与维护变得简单。开发的时候，你可能会遇到组件之间需要共享数据的问题。这篇文章，我们将可能会学到许多组件之间通信的方式。
Vue.js组件之间通信有以下几种方式：
1. 父组件- >子组件 （用Props）
2. 子自建 -> 父组件 (用Events)
3. 任何组件之间 (用 Event Bus)
1. 父组件 -> 子组件：
这种类型的通信，通过在父组件中声明一个参数传递数据到子组件
父组件
可以从以上的代码看到。在子组件ChildComponent声明中增加了一个“message”参数。为了动态设置这个值，我们必须在参数前加“：”。
子组件
在子组件中，已经增加了一个“message”入参，类型为“String”。
属性props只提供了从父组件到子组件的单向通信。如果从子组件到父组件是不可能的。在父组件对message属性的任何改变，都会直接传递到子组件中。
如果当message值改变，想在子组件中调用一个方法该怎么做？
在上面的例子中，通过在“watch”属性里增加一个函数，在函数中调用已经声明的callMe()方法。这样做将会确保当message值改变的时候callMe()方法将会被调用。
2. 子组件 -> 父组件
事件Events将会确保从子组件到父组件的通信。
子组件
在“ChildComponent”中，我们触发了一个事件，该事件将会emit一个消息，并且它的父组件可以通过"v-on:"指令得到这个消息。
父组件
在事件中，参数是可选的。可以传递n个参数，当子组件触发“messageFromChild()”事件，“childMessageReceived()”函数将会被调用。
3. 在任何组件间通信：Event Bus
Event Bus 不会被父子关系所限制。你能够在任何组件之间分享信息。
Abc Component
在上面的AbcComponent中，我们触发了一个‘message_from_abc’事件并且传递了参数。参数在这里是可选的。任何其他组件都能够监听该事件。
Xyz Component
在XyzComponent组件中通过注册“message_from_abc”事件来监听。可以通过在mounted() callback中设置一个事件监听器。事件监听器的回调将会被调用当message_from_abc事件被触发。
giphy.com
或者，我们可以用Vuex来作为vue的状态管理工具。
在下一篇文章，再来介绍Vuex...