首先简单介绍使用vue-router的四个基本步骤：（为了方便演示，所有代码都写在一个文件里） [b]1.定义组件[/b] [img]http://files.jb51.net/file_images/article/201707/2017070411413514.jpg[/img] [img]http://files.jb51.net/file_images/article/201707/2017070411413515.jpg[/img] 2.定义路由 [img]http://files.jb51.net/file_images/article/201707/2017070411413616.jpg[/img] 3.创建router实例并将定义好的路由传入 [img]http://files.jb51.net/file_images/article/201707/2017070411413617.jpg[/img] 4.创建和挂载根实例 [img]http://files.jb51.net/file_images/article/201707/2017070411413618.jpg[/img] [b]再来说一下vue-cli[/b] [b]一、安装vue-cli脚手架工具[/b] [b]二、 创建项目[/b] 使用的是webpack-simple模板，项目名为vue_webpack , webpack-simple和webpack模板区别就是少了代码检查和单元测试这些东西. [b]三、安装项目需要的依赖文件[/b] 进入vue_webpack项目文件夹 [code]cnpm install [/code]安装完成后 项目目录下会多出node_modules文件夹，所有依赖文件都在里面,现在可以测试项目是否创建成功： [code]npm run dev[/code],默认8080端口，需要修改可以到 package.json中在scripts的dev后面添加--port8000。 App.vue后缀为.vue的文件基本格式为：template + script + style 三部分组成 [b]四、项目上线[/b] 自己的项目文件都需要放到 src 文件夹下 项目开发完成之后，可以输入 npm run build 来进行打包工作， 打包完成后，会生成 dist 文件夹，如果已经修改了文件路径，可以直接打开本地文件查看 项目上线时，只需要将 dist 文件夹放到服务器就行了。 [b]父组件和子组件之间进行数据传递：[/b] 在1.0中有$dispatch和$broadcast，但是在2.0中取消了，同样1.0中支持的双向数据绑定<Child :fff.sync=”hu”></Child>，在2.0中也不支持了现在依然还是使用下面的方式来做。 下面的例子中app为父组件，child和news为app的子组件，child1为child的子组件。下面将演示从app向另三个子组件传递数据 和 从三个子组件向app父组件传递数据。 先看一下目录结构：使用的是 webpack-simple模板 [img]http://files.jb51.net/file_images/article/201707/2017070411413619.jpg[/img] 页面布局： [img]http://files.jb51.net/file_images/article/201707/2017070411413620.jpg[/img] [b]一、从子级向父级传递数据[/b] [b]1、通过事件的方式从子级向父级传递数据：[/b] 在父级中使用了模块后通过下面的方式和子集进行通信，getChildDate是在父级中定义的方法，这个名字随便取，通过该方法接收子集传来的数据。Getfromchild是在子集中定义的方法，通过$emit(参数)的形式向父级传递数据，其中第一个参数是在父级中绑定的方法这里就是Getfromchild，第二个参数是要传递的数据，如有多个就写成数组。 [img]http://files.jb51.net/file_images/article/201707/2017070411413621.jpg[/img] [b]2、通过传递对象的方式 [/b] 如果是父级传数据到子级后，修改子集数据的同时父级也要跟着改变，可以使用另一种方式，在从父级往子级传的时候把要传的数据a放在一个对象里，把这个对象传过去，在子级中我们不去修改这个对象，而是修改他的属性a的值，父级中同样会跟着改变。 [b]二、通过props的方式从父级向子级传递数据：[/b] 在父级中：fff是在子级中要用的名字，如果fff前面有：那么后面的hu就是个变量，在data中要去定义。如果没有那么就是普通字符串。 在子级中：用props去接收传来的数据 父组件： [img]http://files.jb51.net/file_images/article/201707/2017070411413622.jpg[/img] 子组件child [img]http://files.jb51.net/file_images/article/201707/2017070411413723.jpg[/img] 子组件child的子组件child1 [img]http://files.jb51.net/file_images/article/201707/2017070411413724.jpg[/img] 子组件news [img]http://files.jb51.net/file_images/article/201707/2017070411413725.jpg[/img] 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。