对于vue来说，组件之间的消息传递是非常重要的，下面是我对组件之间消息传递的常用方式的总结。

一、通信方式：

• props和$emit(常用)
• attrs和listeners
• 中央事件总线（非父子组件间通信）
• provide和inject
• v-model
• parent和children
• vuex

二、示例如下：

1.props和$emit

 　　父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过$emit触发事件来做到的. 父组件代码如下： 子组件代码如下： 这种方式可以完成父子组件间的数据传输，但是无法满足直接深层祖件传输数据，或者说无法满足“爷孙组件”传输数据

2.attrs和listeners

父组件代码如下： 子组件代码如下： 隔代组件 代码如下

3.中央事件总线

中央事件总线 就是一个名字可以叫做bus的vue空实例,里边没有任何内容； main.js 代码如下配置： 父组件代码如下： 子组件代码如下：

4.provide和inject

在 Vue.js 的 2.2.0+ 版本中添加加了 provide 和 inject 选项。他们成对出现，用于父级组件向下传递数据。 父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据，只要在父组件的生命周期内，子组件都可以调用。 父组件代码如下： 子组件代码如下：

5.v-model

父组件代码如下： 子组件代码如下：

6.parent和children

在组件内部可以直接通过子组件$parent对父组件进行操作，父组件通过$children对子组件进行操作.父组件代码如下： 子组件代码如下：

7.vuex

如果业务逻辑复杂，很多组件之间需要同时处理一些公共的数据，这个时候才有上面这一些方法可能不利于项目的维护，vuex的做法就是将这一些公共的数据抽离出来，然后其他组件就可以对这个公共数据进行读写操作，这样达到了解耦的目的。 main.js代码配置如下： store/index.js 配置如下 父模块 vuex 相关代码如下： 父组件代码如下： 子模块 vuex 相关代码如下： 子组件代码如下：