组件是出现就是伪类拆分vue实例的代码量的，以组件来划分不同的模块，将来我们需要什么样的功能，我们可以调用相应的组件

全局组件

Vue.component('组件的名称',{
 id:'#tmp1';
}) 
<template id=tmp1></template>

私有组件

components :{
    login:{
        template:'#tmp1' 
    }
}

<login></login>

组件中的 data

   Vue.componens('组件名',{
   template:'#app1',{
   data:function(){
   return{
       msg:'这是组件中的data定义的数据'
   }
   } ，//定义fn,返回对象,组件中的使用方式 和实例中的data使用完全一样
methods：{
//方法
}
   }
   })

两个组件之间的切换

方式一 ： v-else v-if

方式二：vue提供了component来展示对应名称的组件 component是一个占位符 is属性名称 可以用来指定要展示的组件的名称
<component :is="componentId"></component>