在总结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框的分数变化后总分也随之变化。
完整网页代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js的组件化编程：组件通信</title>
<script src="./js/vue2.js"></script>
</head>
<body>
<div id="app">
<h2>人员表</h2>
<my-person v-for="(p,index) in personList" :key="index" :my-person="personList[index]"></my-person>
<p>总分：{{ total }}</p>
</div>
<script type="text/javascript">
Vue.component("myPerson",{
props:['myPerson'],
template:`<div>
姓名：{{ myPerson.name }}
分数：<input type="number" v-model="myPerson.score"/>
</div>`,
});
var vm=new Vue({
el:"#app",
data:{
total:0,
personList:[
{name:'小明',score:97},
{name:'小丽',score:88},
{name:'小英',score:95},
]
},
methods:{
ScoreChange(){
this.total = this.personList.reduce((prev, curr) => {
return parseInt(prev) + parseInt(curr.score)
}, 0)
}
},
watch:{
personList:{
handler:'ScoreChange',
deep:true,//深度监听
immediate:true,//有初始值
}
}
});
</script>
</body>
</html>显示输出：
2、通过组件的自定义函数（事件）
直接叙述就是在组件的响应事件中调用其他组件的数据或者方法，不用区分父子关系。
完整的代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js的组件化编程：组件通信</title>
<script src="./js/vue2.js"></script>
</head>
<body>
<div id="app">
<h2>人员表</h2>
<my-person :my-name="'小明'" :my-score="'99'" ref="S1"></my-person>
<my-person :my-name="'小丽'" :my-score="'87'" ref="S2"></my-person>
<p>总分：{{total}}</p>
</div>
<script type="text/javascript">
Vue.component("myPerson",{
props:['myName','myScore'],
data(){
return {
person:{
name:"",
score:0
}
}
},
mounted() {
this.person.name=this.myName;
this.person.score=this.myScore;
},
template:`<div>
姓名：{{ person.name }}
分数：<input type="number" v-model="person.score" @input="dataChange()"/>
</div>`,
methods:{
dataChange(){
this.$parent.total=parseInt(this.$parent.$refs.S1.person.score) + parseInt(this.$parent.$refs.S2.person.score);
}
}
});
var vm=new Vue({
el:"#app",
data:{
total:0
}
});
</script>
</body>
</html>输出结果：
说明：
⑴ 数据绑定可以在created或者mounted中进行；
⑵ 绑定的时候不能少写this，否则会提示找不到数据项；
⑶ 关键在事件中的处理，即this.$parent.$refs包含了组件数据，所以在放置组件的时候要写ref属性值（不能重复）。
3、通过事件捕获
直接叙述就是声明另外一Vue实例进行事件挂载与事件捕获，就是组件的事件在Vue实例上进行注册，在另外组件上需要处理的时候就捕获这个事件即可。
完整的代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js的组件化编程：组件通信</title>
<script src="./js/vue2.js"></script>
</head>
<body>
<div id="app">
<h2>人员表</h2>
<my-person :my-name="'小明'" :my-score="'99'" ref="S1"></my-person>
<my-person :my-name="'小丽'" :my-score="'87'" ref="S2"></my-person>
<my-total></my-total>
</div>
<script type="text/javascript">
eventBus=new Vue();
Vue.component("myPerson",{
props:['myName','myScore'],
data(){
return {
person:{
name:"",
score:0
}
}
},
mounted() {
this.person.name=this.myName;
this.person.score=this.myScore;
},
template:`<div>
姓名：{{ person.name }}
分数：<input type="number" v-model="person.score" @input="myDataChange()"/>
</div>`,
methods:{
myDataChange(){
eventBus.$emit('DataChange',this.person);
}
}
});
Vue.component("myTotal",{
data(){
return {
total:0,
personList:[]
}
},
mounted() {
eventBus.$on('DataChange',(p)=>{
this.total=0;
if( !this.personList.find(obj=>obj.name==p.name) ){
this.personList.push(p);
}
this.personList.forEach(element => {
this.total+=parseInt(element.score);
});
})
},
template:`<div>总数：{{ total }}</div>`
});
var vm=new Vue({
el:"#app"
});
</script>
</body>
</html>结果输出：
说明：
⑴ 需要声明另外一个Vue实例，名称可以根据自己需要设定；
⑵ 组件的数据绑定可以在created或者mounted中进行；
⑶ 组件的事件触发eventBus.$emit('DataChange',this.person)，DataChange可以被其他组件进行捕获处理；
⑷ 其他组件捕获事件
eventBus.$on('DataChange',(p)=>{
//p是传递过来的参数
//......
})原来Vue组件的数据通信这么简单！
