vue父子组件通信

  首先认识一下vue的目录结构。vue是一个组件化开发的语言，组件之间是有父子关系的，还有一种关系叫全局组件和局部组件。

   App.vue可以被认为是所有组件的父组件，它也是整个页面的入口文件，是之前提到过的body。其它组件被放在src->components里面，文件后缀都是.vue。HelloWorld.vue就是一个组件，初始化的模板为我们提供了一种方法，实现了组件的挂载：路由。

图1-1 文件目录结构

问题：初始化的模板是如何将HelloWorld.vue挂载到app.vue的？

           

图1-2 app.vue

 问题：路由指向哪里？在哪里定义的指向？

          在router目录下的index.js文件中定义了路由。

图1-3 router的定义

          首先index.js先import vue-router，保证在此js文件可以识别vue-router的语法，然后导入了HelloWorld.vue这个组件。Vue.use(Router)代表使用路由。

          export default new Router初始化了一个默认的路由，在Vue中，path:'/' 代表了最顶层的路由，也就是所有组件的父组件app.vue调用的路由路径，可以看到路由指向了HelloWorld组件。

          图1-2 app.vue中，的作用就体现了出来，将

显示的内容指向了路由，路由文件index.js将路由指向了HelloWorld.vue，这样就完成了组件的挂载。

图1-4 index.js文件

        了解了组件是如何挂载的，接下来了解组件是如何通信的。

        一个完整的vue项目组件之间的关系是十分复杂的，会层层嵌套组件。所以在原则上，vue是不允许数据双向流动的，意思就是只允许父组件的数据传递给子组件，子组件的数据不允许传递到父组件，这样保证了数据的单向流动性。

        凡事都有例外，如果真的需要子组件向父组件传递数据，需要子组件触发Emit Event(发出事件)。

图2-1 vue组件通信示意图

组件内部通信Demo：实现购物车商品加减按钮。

①新建一个组件Counter.vue.

图2-2 Counter.vue

②初始化两个button，“+” 和 “-” ，中间为显示的数字。

 ③初始化两个method:increment和decrement来实现num的“加”和“减”，并初始化num的数值为0。

  ④将method绑定在button上，并用“点击”事件触发。

  ⑤让HelloWorld.vue加载Counter.vue

   打开HelloWorld.vue。用import Counter from './Counter'来加载Counter组件。" ./ " 代表同一级目录。

    ⑥在Script中加载components.

      ⑦调用组件Counter.然后看一下效果~！