三种简洁易行的方法解决基于Vue.js的组件通信
在总结Vue组件化编程的数据通信方面，看了网上的很多资料，都是讲父子组件的数据交互也就是参数传递，在组件的通信方面分几种情况，比如父子组件、非父子的兄弟组件、非父子的其他组件等等，这样看来，基于Vue.js的组件通讯非常繁琐。
可是我们在C/S下的组件通信并没有这些麻烦，通常情况下，我们怎样设计组件通信？
在组件上声明事件，可以是截获系统事件的，也可以是自定义事件，在这个事件中，我们就可以对外进行数据通信。
沿着这个思路，就可以解决Vue组件化编程的组件通信，很简单了。
另外，在Windows中的消息队列中，我们也可以通过捕获事件的方式来得到组件的操作和数据，也同样可以实现Vue组件化编程的组件通信。
最简单的，当然是组件中的数据直接对外进行数据绑定，这样也就可以实现组件通信了。
所以总结基于Vue.js的组件通信，比较简单易用的三种方式：通过数据绑定与数据监听、通过组件的自定义函数（事件）、通过事件捕获。
下面针对这三种情况分别举例说明。
用于演示的基本数据结构：
personList:[
{name:'小明',score:97},
{name:'小丽',score:88},
{name:'小英',score:95},
]假设现在需要计算score的总和，并且总分也要随着这些分数值的变化而变化。
1、通过数据绑定与数据监听
首先，在Vue实例的data中定义用于计算总和的数据项total以及personList，再定义组件放置姓名和分数（input输入框），然后组件的数据项与personList绑定，最后监听personList数据变化就可以得到总和，并且每个input框的分数变化后总分也随之变化。
完整网页代码：
Vue.js的组件化编程：组件通信
人员表
总分：{{ total }}
显示输出：
2、通过组件的自定义函数（事件）
直接叙述就是在组件的响应事件中调用其他组件的数据或者方法，不用区分父子关系。
完整的代码示例：
Vue.js的组件化编程：组件通信
人员表
总分：{{total}}
输出结果：
说明：
⑴ 数据绑定可以在created或者mounted中进行；
⑵ 绑定的时候不能少写this，否则会提示找不到数据项；
⑶ 关键在事件中的处理，即this.$parent.$refs包含了组件数据，所以在放置组件的时候要写ref属性值（不能重复）。
3、通过事件捕获
直接叙述就是声明另外一Vue实例进行事件挂载与事件捕获，就是组件的事件在Vue实例上进行注册，在另外组件上需要处理的时候就捕获这个事件即可。
完整的代码示例：
Vue.js的组件化编程：组件通信
人员表
结果输出：
说明：
⑴ 需要声明另外一个Vue实例，名称可以根据自己需要设定；
⑵ 组件的数据绑定可以在created或者mounted中进行；
⑶ 组件的事件触发eventBus.$emit('DataChange',this.person)，DataChange可以被其他组件进行捕获处理；
⑷ 其他组件捕获事件
eventBus.$on('DataChange',(p)=>{
//p是传递过来的参数
//......
})原来Vue组件的数据通信这么简单！