众所周知，Vue 是基于组件来构建 web 应用的。组件将模块和组合发挥到了极致。Vue 是虽说吸取了 AngularJs 的 MVVM的思想，但是它是单向数据流的，也就是说子组件无法直接改变父组件状态。下面总结出常用的组件消息传递的方式。
父组件向子组件传递数据该方式的数据传递是遵循 Vue 单向数据流的规则的，因此使用起来十分的自然。若父组件的数据改变子组件的 UI 展现也随之变化。
Parent.vue
Parent
Child.vue
{{name}}
效果如下：
这里介绍两种方式：
1、子组件触发事件，父组件监听事件做出数据改变
2、父组件将数据变更方法以 props 的形式传给子组件（借鉴 react 的父子通信方式）
监听事件
父组件上通过 v-on 监听子组件所触发的事件。
EventParent.vue
Event Parent
EventChild.vue
{{name}}
效果如图：
传递props
因为自己写 react 较多，所以好奇 Vue 是否支持子组件回调父组件的事件处理函数，试了一下是可以的。好像 Element UI 使用该方式较多。个人认为该方法和事件方式同样灵活。
Parent.vue
Props Parent
Child.vue
{{name}}
以 props 的这种方式大家可以尝试实现一下是一种新的思路。
上述三个实例都在讲述父子组件的通信，那么不相关的组件该如何通信呢？可以创建一个 Vue 的实例作为桥来中转事件。
Child01.vue
我是哥哥，我来触发事件
Child02.vue
我是弟弟，我来监听哥哥触发的事件来改变自己的数据
{{title}}
效果如图：
父组件改变子组件的数据利用正常单向数据流的特性即可，子组件改变父组件的数据可以通过事件或者函数 props 两种方式实现，非父子组件通信则利用 EventHub 中转一下。
欢迎大家指正批评、或留言。
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/818/viewspace-2799709/ ，如需转载，请注明出处，否则将追究法律责任。
