组件化开发是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
就是这样 :)