组件化时通过将页面按照不同的功能划分为不同的部分页面即组件 模块化则针对代码而言，而非页面，它将能够实现某个功能的代码组合起来形成能实现某个功能的模块如能实现循环功能的模块。
方式一：全局组件，可以在任意位置使用
vue.component('组件名',{ data:function(){ return {}},//组件的data为函数，因为创建的组建可以复用而组件内部的数据不可以，而data为函数时可以形成闭包环境。data的返回值必须为对象类型。 template:''//template也可以是ES6中的模板字符串 })方式二：局部组件，只能在父组件区域中使用。
var 组件模板名={ template:'', data:function(){ return {} }} //======================================================= var vm=new vue({ data:{}, components:{ 组件名：组件模板名 }})父传子
//静态方法 <div id="#app> <son>{{msg}}</son>//数据的使用：直接在子组件中使用数据或者在模板内部使用即可 </div> <script> var son={ template:'<div></div>', data:function(){ return {}, props:'msg'//使用props来接收数据 }} var vm=new vue({ data:{ msg:'hello'//要传递给子组件的数据 }, components:{ son：son//son为vm实例的子组件。 }}) </script> //动态方法 <div id="#app> <son :msg="msg">{{msg}}</son>//v-bind绑定传递过来的数据，属性值也为该数据 </div> <script> var son={ template:'<div>{{msg}}</div>', data:function(){ return {}, props:'msg'//使用props来接收数据 }} var vm=new vue({ data:{ msg:'hello'//要传递给子组件的数据 }, components:{ son：son//son为vm实例的子组件。 }}) </script>子传父:通过自定义事件来传递
<div id="#app> <son v-on:send="receive()"></son>//第二步：父组件监听子组件定义的事件来传递数据，再用自己的方法来接收数据,或者直接使用$event在属性值中直接处理传递过来的数据。 </div> <script> var son={ template:'<div><button @click="$emit(send,msg)">点击传递数据</button></div>',//第一步：子组件通过触发绑定自定义事件来传递数据 data:function(){ return { msg:'hello' } }} var vm=new vue({ data:{ }, components:{ son：son//son为vm实例的子组件。 }, methods:{ receive:function(val){ console.log(val)//val即为传递过来的数据$event } }}) </script>非父子间的传递
//存在同一父组件 //不存在同一父组件 <div id="#app> <son></son> <son></son> </div> <script> var bus=new Vue() vue.prototype.Bus=bus//第一步:将发布者挂载到原型对象 var son={ template:'<div><button @click="send">点击传递数据</button></div>', data:function(){ return { msg:'hello', msg1:'' }, methods:{ send:function(){ Bus.$emit(change,this.msg)//发布 }}, mounted:{ Bus.$on(change,(val)=>{//订阅 this.msg1=val }) } }} var vm=new vue({ data:{ }, components:{ son：son//son为vm实例的子组件。 } }}) </script>插槽
<script> <item>要插入插槽的内容<item> Vue.component('item',template:`<slot><slot>`)//插槽代替自定义组件内部的内容 </script>具名插槽
<script> <item name="myslot">要插入插槽的内容<item> Vue.component('item',template:`<slot name="myslot"><slot>`)//插槽根据name属性来匹配对应的内容 </script>作用域插槽 具名插槽只能匹配单个标签内的内容，而作用域插槽可以匹配该作用域内的多个
<script> <template slot="myslot"> <p>内容<p> <div>内容</div> </template> Vue.component('item',template:`<slot name="myslot"><slot>`)//插槽根据name属性来匹配对应的内容 </script>通过query传递参数
<router-link to="user/1"></router-link>// <router-view></router-view>// <div @click="change"></div> <script> Vue.component('home', {template:'', data(){ return { id:$route. query.id//使用$route.query来接收数据 } }})// var routerobj=new VueRouter({ path:'user',component:home }) var vm=new Vue({ data:{}, router:routerobj, methods:{ change () { this. $route.push({path:'user',query:{id:id}}) } } }) </script>通过params传递参数
<router-link to="user/1"></router-link>// <router-view></router-view>// <div @click="change"></div> <script> Vue.component('home', {template:'', data(){ return { id:$route.params.id//使用$route.params来接收数据 } } })// var routerobj=new VueRouter({ path:'user',component:home}) var vm=new Vue({ data:{}, router:routerobj, methods:{ change () { this.$route.push({path:'user',params:{id:id}}) } }}) </script>通过props传递参数
<router-link to="user/1"></router-link>// <router-view></router-view>// <home>{{name}}</home> <script> Vue.component('home', {template:'', props:['id']/['name']/['name','id'], data(){ return { name:$route.params.name }} })//使用props来接收，true代表接收路由中的参数 var routerobj=new VueRouter({// path:'user/:id', component:home, props:true,//方式一：使用路由传参 props:{ name:'' },//方式二：使用对象传递数据，仅能传递data中的数据 props:route=>({name:'',id:route.params.id})//方式三：使用函数传递，既传递路由中的参数也传递data中的数据。 }) var vm=new Vue({ data:{ name:'lisa' }, router:routerobj }) </script>r o u t e r 和 router和 router和route区别
router是VueRouter的一个对象，通过Vue.use(VueRouter)，和VueRouter构造函数得到一个router的实例对象 route是一个跳转的路由对象，每一个路由都会有一个route对象是一个局部的对象，可以获取对应的name,path,params,query等路由对象总结
$route.name 当前路由的名称，用于命名式路由中。 $route.path 当前路由对象的路径 $route.meta 在路由里面埋一个字段，当切换路由时候把信息传过去 $route.query 查询信息包含路由中查询参数的键值对 $route.hash 当前路径的哈希值，带# $route.params 预设的变量，切换时候通过parmas带过去某个id的值，动态路由即：路由的一部分相同，另一部分不同，如： path:’/user/1’ path:’/user/2’ 那么路由不同部分的匹配就可以使用动态匹配方法。
<router-link to="user/1"></router-link>//给路由参数传递值 <router-view></router-view> <script> Vue.component('home', {template:'', data(){ return { id:$route.params.id//接收传递的参数 }} }) var routerobj=new VueRouter({ path:'user/:id',//不相同部分使用参数来匹配 component:home, }) var vm=new Vue({ data:{ }, router:routerobj }) </script>方式一：声明式路由
<router-link to="">方式二：编程式路由
var 组件模板名={ template:'<button @click="goRegister"></button>', methods:{ goRegister:function(){ this.$router.push('')//路由前进 this.$router.go(n)//路由后退，参数为数值类型，表示回退几步 } } }} var vm=new vue({ data:{}, components:{ 组件名：组件模板名 }})目的： 将不同路由对应的组件分割成不同的代码块，达到只有在访问该路由的时候再加载对应的组件，从而达到高效的目的。 方式一
//将一个异步组件定义为一个返回一个promise对象的工厂函数，该函数返回的promise对象再resolve组件本身。 const foo= () => promise.resolve({/*组件定义对象*/})方式二
//在webpack中，使用动态import来实现，再使用babel插件 syntax-dynamic-import来解析语法，两者结合形成以下方式： const foo= () => import ('./foo.vue')//import ()返回一个promise对象。 //定义完成后不需要做任何改变，像以往一样使用即可 const router=new Router({ routes:[{path:'',component:foo}] })把组件按组分块
//将某个路由下的所有组件都打包到一个异步块chunk中,只需要使用 命名 chunk，一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。 const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue') const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue') //Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中