[b]组件通信[/b] 几乎所有的mvvm框架中都要涉及组件通信的功能（吐槽一下knockout,毕竟是鼻祖就先不说它了）。而且目前的前端形式来看，组件化是一个项目的基础。所以选好一个合适的框架后，随着组件的不断增加，业务的复杂度提升，组件之间的通信变得尤为重要。 [b]实践方法[/b] 由于更换新的框架，我们的项目由Avalon更新成Vue.但是为了兼容以前的业务代码，不能直接使用vue的标准实践方式，我还是拿过来后封装了一个vue的class,具体业务里面不影响使用，封装的过程之后写出来再聊吧，下面来总结一下最近用到的通信实践方法。 [b]1.父组件是通过props传递数据给子组件[/b] vmodel 中包含了两个子组件 在上面这段代码中我们可以看到，定义了两个子组件，并且使用指定v-bind指令传递了数据，子组件会接收到传递的数据。 建议接收到单向的props数据后，定义一个局部变量来初始化使用。 [b]2.父组件与子组件之间通信的其他方式[/b] vue中给实例提供了三个我们可用的API $children 和 $refs 以及 $parent 。 [code]$children [/code]：当前实例的直接子组件。需要注意 $children 并不保证顺序，也不是响应式的。 [code]$refs [/code]：包含了当前实例所有拥有 ref 注册的子组件的对象. [code]$parent[/code] : 当前实例的父实例。 所以说，如果在通信方面我们我组件想要调用子组件，能用的方法只有 $refs 了，因为 $children 是一个数组，并且不保证顺序，也没有相关的id去寻找我们需要的那个特定子组件。但是如果使用 $refs 去寻找特定子组件，那就必须要给那个子组件注册 ref 。 父组件的模版 父组件 子组件 [b]3.平行组件之间的两种通信方式[/b] a.官方提供的事件bus b.通过父组件去找兄弟组件 其实以上两种方法最好的实践方式是封装到项目的基类中，这样不用每次都去定义一个空Vue()实例，而是每个实例的基类中都有这个事件bus。同样可以封装找到其他兄弟组件的方法，但是该兄弟组件必须注册ref 下面这个方法是我在项目中封装的用于找到父组件，然后再去找到兄弟组件的方法。 [b]使用[/b] [b]4.组件间复杂数据通信Vuex[/b] 一说到vuex，很多刚开始接触vue的人会主动避免去使用它，其实它并没有想象中的那么复杂。最好的开始是引入vuex后，走一遍给出的小示例。但是如果你的项目并不复杂的话，可以不考虑状态管理，那么什么时候需要使用状态管理呢？ 我们来看这样一个布局 [img]http://files.jb51.net/file_images/article/201708/2017815152558523.png?2017715152624[/img] 如果component1中的某个数据变更，那么com2,com3也要跟着更新，此时com3中又细分为了三个小组件。 [b]问题：[/b] [list=1] [*]多个试图依赖同一个状态[/*] [*]多层嵌套的组件，数据变更和代码维护困难[/*] [/list] 那这样的情况时，我们可以考虑使用状态管理。下一篇文章将详细讲解关于vuex的实践和理解。 [b]写在最后的总结[/b] 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。