vue2.0之父子组件通信的理解

       最近在学习用vue2.0进行项目的开发，由于接手项目的时候，项目的完整架构已经搭建完毕，为了不破坏之前的项目，我就采用了比较古老的写法，说实话不采用es6的语法去写，有好多事情都变得比较麻烦了，不过原理还是一样的。

1、父子组件如何通信

      在写组件的时候，建议先去官网上去看一遍  https://cn.vuejs.org/v2/guide/components.html，我直接先贴上自己的代码，先谈谈子组件如何向父组件传送数据的，思维反过来，哈哈
图一     

图二

图三

      官网上讲的只是一个大概，只有自己实践过才能有自己的理解， 我现在大概说说自己的理解，关于组件的注册及组件在页面上正常的引用，这块我认为大家都已经理解了，所以就跳过这块不说了

       第一步：首先看图一中，我在组件page-component中自定义了两个事件用来监听事件响应，
v-on:pagechange="changePage" 这个我们可以看成是 v-on:click="changPage"这种形式，只不过pagechange是为了当子组件为了向父组件传递数据的时候，触发的一个事件（可以理解为：为了某种目的，而自定义的一个事件，在需要他的时候进行触发，而pagechange就相类似于click的功能，只不过它不是通过点击来触发的）然后我们在子组件中可以使用$emit来实时的触发这个事件，我这边是在子组件中使用了watch来监听当前页数以及需要一页展示的行数，当其中的一个数据发生变化时，触发pagechange或者rowchange事件，你可以理解为一个点击事件或者其他的事件，来通知父组件进行实时的响应，参看图二。这样子组件已经将自己想要发出的数据通过事件广播的方式，发出去了，接下来父容器就需要去接受这个数据了。

      第二步：父容器接受子组件触发的事件进行事件响应
     看图三，结合图一，图二来进行分析，首先当子组件监听到currentPage或者rows数据变化的时候会
执行this.$emit("pagechange",this.currentPage)和this.$emit("rowschange",this.rows);这个方法，第一参数是触发的事件类型（such as click）第二个参数 是需要传递的数据，此时执行完这步之后，页面上就有pagechange和rowschange的事件触发了，当这个事件触发之后就会去执行对应的事件函数即在父容器定义的方法changPage和changRow，这样子组件触发事件然后父容器进行事件响应，这样数据就完成了从子到父的传递。

   其中需要注意一个问题，如果你像下面这样定义
 

2.父向子传递数据
       这个就比较好理解了 参考图一html的写法 :total-count="totalNumbers" 其中totalNumbers是父容器将要传给子组件的数据，然后total-count相当于一个连接两者的桥梁通过如下方式进行连接

通过关键属性props接受桥梁完成桥的搭建，这样就可以在子组件中使用传过来的数据了