Vue:父子组件信息传递
组件化开发是Vue的特色，同时也是未来前端开发的趋势，组件的相互调用也产生了组件沟通问题。在Vue1.X中我们使用$dispatch和$broadcast处理组件沟通问题，但是因为
因为基于组件树结构的事件流方式实在是让人难以理解，并且在组件结构扩展的过程中会变得越来越脆弱。Vue官方
因此这里我们也只讨论父子组件通信问题，并且忽略了CSS（我写的很丑。将就看吧 /滑稽）
父组件HTML
<div id="app">
<div class="box-wrapper" >
<div class="box">{{total}}</div>
<div class="child-wrapper">
<child :total='this.total' @childMsg="parentMethod"></child>
<child :total='this.total' @childMsg="parentMethod"></child>
</div>
</div>
</div>请自动忽略wrapper，我们在父组件中创建了box显示父组件的计数器total，创建了两个子组件child。请注意
<child :total='this.total' @childMsg="parentMethod"></child>```
我们用:total='this.total' 将total传递给了子组件。这里this.total是我们要传递给子组件的值（可以省略this，这里为了区分我加上；），total是子组件将要得到的值，切记，这里我们使用了 :total 方法即v-bind:total。@childMsg是绑定的事件名称，方法是parentMethod，说明这是父组件的方法
## 父组件JavaScript
```js
export default {
name: 'app',
data(){
return{
total:0
}
},
components: {
child
},
methods:{
parentMethod(){
this.total+=1;
}
},
}组件本身的属性total，注册组件child（当然你需要先import），methods parentMethod，当事件childMsg发生时使用的方法
子组件HTML
<div class="child">
<div class="child-box" @click="toParent">
<div>父组件的值:{{total}}</div>
<div>子组件的值:{{count}}</div>
</div>
</div>一个box里面装了两个box，第一个是父组件传来的值total,一个是本身的值count，并且绑定了click事件，执行方法为toParent
子组件JavaScript
export default {
data(){
return{
count:0
}
},
props:{
total:{
type:Number,
}
},
methods:{
toParent(){
this.$emit('childMsg');
this.count++;
}
}
}data里是本身的count值，props里声明父组件传过来的值，并且声明基本类型（也可以不用声明），注意此时props是一个对象，还有一种传参方式是传字面量，此时props会变成一个数组，但建议使用传对象的形式。 现在看看效果
子组件向父组件传参数
methods:{ toParent(){ this.$emit('childMsg',arg); this.count++; } }子组件不仅能通知父组件，并且能向父组件传递参数，在事件名称的后面添加参数即可。但需要注意的是
<child :total='this.total' @childMsg="parentMethod"></child>```
父组件的HTML模板中仍然只绑定函数名，不能写参数，参数在父组件的方法中获取
```js
parentMethod(arg){ this.total+=arg; }点击效果
没有点击
此时各组件数据都为0
第1次点击
点击第一个组件，父组件的值发生变化，并且动态响应到了第二个组件
第2次点击
点击第二个组件，父组件仍然法生变化，并且动态响应到了第一个组件
第3次点击
两个组件的值并没有相互影响，是两个实例，得益于data是中的值是以函数返回的形式。
原理解析
父组件传递给子组件想必不用说了吧，响应也是基于数据驱动进行响应的。 子组件传递给父组件，先是子组件响应自身的click事件，在执行过程中通过this.$emit('childMsg')触发父组件注册的事件，再又父组件自身的parentMethod处理数据。
小结
子组件通过触发父组件事件达到修改数据的目的。 这里我们仅仅解决了父子组件传值，并且过程繁琐，也没有解决兄弟组件传值问题。处理复杂的通信问题，官方推荐Vuex 就是这样 :)