Vue的组件是可复用的 Vue 实例，且带有一个名字 。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用。因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
一 创建组件
Vue提供了三种不同的方式来定义组件，分别是：全局组件，私有组件，单文件组件。接下来就让我一一道来。
1，全局组件
注册全局组件非常简单，也是很常用的一种方式。
1 Vue.component('myCom',{
2 template:'我是一个全局组件
'
3 });
Vue.component()方法需要两个参数：
第一个，组件名称；
第二个，实例（初始化）对象，可以包含所有使用new方式创建Vue实例时提供的所有属性，除了el。
注意：组件的实例对象必须提供一个template属性，用作该组件的HTML代码模板，且在该模板中有且只能有一个根元素。全局组件的注册必须在创建Vue实例之前。
小技巧：由于在编写JS时，一般没有HTML代码提示，创建组件模板代码会很不方便，所有可以在HTML文件中使用元素创建模板，然后在组件的template属性中使用id选择器引用该模板。
注意：元素必须在new Vue实例接管的根元素外部。
1 <template id="tem">
2 <div>
3 <p>我是组件内的pp>
4 <span>我是组件中的spanspan>
5 div>
6 template>
7
1 Vue.component('myCom',{ 2 template:'#tem' 3 });
4 //在组件中
2，私有组件
全局创建的组件在所有Vue实例中均可以使用，有时候这并不符合我们的需求。你可以通过以下方式定义Vue实例的私有组件，这些组件只能在该Vue实例根元素内部使用。
1 var vm = new Vue({
2 el:'#app',
3 components:{
4 mycom:{
5 template:'#tem'
6 }
7 }
8 });
通过Vue实例的components属性可以定义私有组件，该属性绑定一个对象，对象的属性名是组件名，属性值是组件实例对象。
3，单文件组件
Vue的单文件组件是一个以.vue为后缀名的文件。由于HTML和JavaScrip不能识别.vue文件，所以不能直接使用这种方式的组件，必须配合webpack或vue-cli工具才能正确解析.vue文件。这里的重点是Vue单文件组件，所以有兴趣的同学请移步webpack中文网。
1
2 //HTML模板
3
4
7
.vue文件的名称就是组件的名称，其结构非常简单、清晰：
标签是组件的HTML模板；