vue 模块间的通讯是 vue 开发中很此基础也极为重要的部分，作为采用 vue 的开发人员每天都在采用。同时，vue 通讯也是复试中非常低频的难题，有很多丘托韦，都是紧紧围绕通讯展开。
责任编辑会如是说常见的通讯形式，并预测五种形式的采用情景和特别注意点。
vue中倡导单向报文，这是为了保证报文向的开放性，使程序更更易认知。但对于一些边界线情况，vue也提供更多了显性的通讯形式，这些通讯形式会冲破单向报文的原则，假如谨慎采用。服务器
上面他们将模块通讯分为兄弟二人模块通讯 和 非兄弟二人模块通讯展开预测。
兄弟二人模块通讯
prop 和 events
prop和events最此基础也最常用，这里不提供更多示例。透过prop向上传达，透过该事件向上传达是两个 vue 项目最理想的通讯状况。
采用时有三点须要特别注意：
第一，不假如在两个子模块内部发生改变prop，这种会毁坏单向的统计数据存取，导致报文无法认知。假如有这种的须要，能透过data特性转交或采用computed特性展开转换。第二，假如props传达的是提及类型(第一类或是字符串)，在子模块中发生改变那个第一类或字符串，父模块的状况会也会做相应的预览，利用这一点就能同时实现兄弟二人模块统计数据的单向存取，虽然这种同时实现能节约标识符，但会牺牲生命报文向的开放性，令人无法认知，最好不要这种去做。想同时实现兄弟二人模块的统计数据单向存取，能采用v-model或.sync。v-model 命令
v-model服务器是用来在配置文件命令行或是模块上建立单向存取的，他的其本质是v-bind和v-on的句法糖，在两个模块上采用v-model，预设会为模块存取名叫value的prop和名叫input的该事件。
当他们模块中的某两个prop须要同时实现上面所言的单向存取时，v-model就能大展身手了。有了它，就不须要自己全自动在模块上存取窃听当前示例上的自订该事件，会使标识符更简约。
上面以两个 input 模块同时实现的核心标识符，如是说下v-model的应用。
有时，在某些某一的命令行中名叫value服务器的特性会有特殊的涵义，这时能透过model快捷键来正视这种武装冲突。
.sync 缩排
.sync缩排在 vue 1.x 的版中就已经提供更多，1.x 版中，当子模块发生改变了两个暗含.sync的prop的值时，会将那个值并行到父模块中的值。这种采用起来极为方便，但难题也极为明显，这种毁坏了单向报文，当应用复杂时，debug 的成本会非常高。
于是乎，在vue 2.0中移除了.sync服务器。但是在实际的应用中，.sync是有它的应用情景的，所以在 vue 2.3 版中，又迎来了全新的.sync。
新的.sync缩排所同时实现的已经不再是真正的单向存取，它的其本质和v-model类似，只是一种缩写。
上面的标识符，采用.sync就能写成
这种，在子模块中，就能透过上面标识符来同时实现对那个prop重新赋值的意图了。
v-model 和 .sync 对比
.sync从功能上看和v-model极为相似，都是为了同时实现统计数据的单向存取，其本质上，也都不是真正的单向存取，而是句法糖。相比较之下，.sync更加灵活，它能给多个prop采用，而v-model在两个模块中只能有两个。从语义上来看，v-model存取的值是指那个模块的存取值，比如 input 模块，select 模块，日期时间选择模块，颜色选择器模块，这些模块所存取的值采用v-model比较合适。其他情况，没有这种语义，个人认为采用.sync更好。ref
ref 特性能为子模块赋予两个 ID 提及，透过那个 ID 提及能直接访问那个子模块的示例。当父模块中须要主动获取子模块中的统计数据或是方法时，能采用$ref服务器来获取。
采用 ref 时，有三点须要特别注意
$refs是作为渲染结果被建立的，所以在初始渲染的时候它还不存在，此时无法无法访问。$refs不是响应式的，只能拿到获取它的那一刻子模块示例的状况，所以要避免在模板和计算特性中采用它。$parent 和 $children
$parent特性能用来从两个子模块访问父模块的示例，$children特性 能获取当前示例的直接子模块。
在有些情景下，两个模块之间可能是兄弟二人关系，也可能是更多层嵌套的祖孙关系,这时就能采用$parent。
上面是 element ui 中的模块 el-radio-group 和 模块 el-radio 采用示例：
在 el-radio-group 和 模块 el-radio 通讯中， 模块 el-radio 的 value 值须要和 el-radio-group的v-model服务器的值展开存取，他们就能在 el-radio 内借助$parent来访问到 el-radio-group 的示例，来获取到 el-radio-group 中v-model存取的值。
上面是获取 el-radio 模块中获取 el-radio-group 示例的源码：
非兄弟二人模块通讯
$attrs 和 $listeners服务器
当要和两个嵌套很深的模块展开通讯时，假如采用prop和events就会显的极为繁琐，中间的模块只起到了两个中转站的作用，像上面这种：
当要传达的统计数据很多时，就须要在中间的每个模块都重复写很多遍，反过来从后代模块向祖先模块采用 events 传达也会有同样的难题。采用$attrs和$listeners就能简化这种的写法。
$attrs服务器会包含父模块中没有被prop转交的所有特性（不包含class 和 style 特性），能透过v-bind=”$attrs”直接将这些特性传入内部模块。
$listeners会包含所有父模块中的v-on该事件窃听器 (不包含.native修饰器的) ，能透过v-on=”$listeners”传入内部模块。
上面以父模块和孙子模块的通讯为例如是说它们的采用:
provide 和 inject
provide服务器和inject须要在一起采用，它能使两个祖先模块向其所有子孙后代注入两个依赖，能指定想提供更多给后代模块的统计数据/方法，不论模块层次有多深，都能采用。
provide和inject存取不是响应的，它被设计是为模块库和高阶模块服务的，平常业务中的标识符不建议采用。
dispatch 和 broadcast
vue 在2.0版就已经移除了$dispatch服务器和$broadcast，因为这种基于模块树结构的该事件流形式会在模块结构扩展的过程中会变得越来越难维护。但在某些不采用 vuex 的情况下，仍然有采用它们的情景。所以 element ui 和 iview 等开源模块库中对broadcast和dispatch方法展开了重写，并透过 mixin 的形式植入到每个模块中。
同时实现dispatch和broadcast主要利用他们上面已经说过的$parent和$children。
broadcast服务器方法的作用是向后代模块传值，它会遍历所有的后代模块，假如后代模块的componentName与当前的模块名一致，则触发$emit该事件，将统计数据params传给它。
dispatch的作用是向祖先模块传值，它会一直寻找父模块，直到找到模块名和当前传入的模块名一致的祖先模块，就会触发其身上的$emit该事件，将统计数据传给它。那个寻找对应的父模块的过程和文章前面讲解$parent的例子类似。
eventBus
对于比较小型的项目，没有必要引入 vuex 的情况下，能采用eventBus服务器。相比他们上面说的所有通讯形式，eventBus能同时实现任意两个模块间的通讯。
它的同时实现思想也很好认知，在要相互通讯的两个模块中，都引入同两个新的vue示例，然后在两个模块中透过分别调用那个示例的该事件触发和窃听来同时实现通讯。
透过 $root 访问根示例
透过$root，任何模块都能获取当前模块树的根 Vue 示例，透过维护根示例上的data，就能同时实现模块间的统计数据共享。
透过这种形式，虽然能同时实现通讯，但在应用的任何部分，任何时间发生的任何统计数据变化，都不会留下变更的记录，这对于稍复杂的应用来说，调试是致命的，不建议在实际应用中采用。服务器
Vuex
云主机、VPS、挂机宝、游戏服务器上永恒云
Vuex 是两个专为 Vue.js 应用程序开发的状况管理模式。它采用集中式存储管理应用的所有模块的状况，并以相应的规则保证状况以一种可预测的形式发生变化。对两个中大型单页应用来说是不二之选。
采用 Vuex 并不代表就要把所有的状况放入 Vuex 管理，这种做会让标识符变的冗长，无法直观的看出要做什么。对于严格属于模块私有的状况还是假如在模块内部管理更好。服务器
自己同时实现简单的 Store 模式
对于小型的项目，通讯极为简单，这时采用 Vuex 反而会显得冗余和繁琐，这种情况最好不要采用 Vuex，能自己在项目中同时实现简单的 Store。
和 Vuex 一样，store 中state服务器的发生改变都由 store 内部的action来触发，并且能透过log保留触发的痕迹。这种形式极为适合在不须要采用 Vuex 的小项目中应用。
与$root访问根示例的方法相比，这种集中式状况管理的形式能在调试过程中，透过log记录来确定当前变化是如何触发的，更容易定位难题。
永恒云出品
