一、全局组件

全局组件的形式如下：

<template id="childrenOne">
	<div>
		<p>我是组件A</p>
	</div>    
 </template>
 
Vue.component('children-a',{
		//data 为对象类型，将数据放在返回值中
        data(){
            return{
                title:"我是子组件"
            }
        },
        template:'<div>{{title}}</div>'
        //也可以直接写一个template的id
        //template:'#childrenOne'
    })

其中Vue.component 的第一个参数为组件名，以后可以根据这个组件名在其他地方进行调用，而第二个参数大括号里面放的内容跟我们平时new一个Vue对象里面放的内容一模一样，只不过这个里面的data是一个函数形式。另外template里面可以写html代码段，也可以在body里写一个template，增加一个id,然后在template里直接写Id名称。

注：template里面内容只能用一个唯一的div包裹住，如果template的儿子元素中有两个元素，那么就会报错。

全局组件完成后相对于局部组件来说不用注册在任何vue管辖的html中(也就是vue的el元素下)都可以调用。

完整流程

html:

<div id="app">
    <children-a></children-a>
</div>

js:

	Vue.component('children-a',{
        data(){
            return{
                title:"我是子组件"
            }
        },
        template:'<div>{{title}}</div>'
    })
    var vm = new Vue({
        el:'#app',
    })

注： 在我测试的来看，vue的全局组件没有变量提升，所以全局组件要在Vue实例前。

一、局部组件

局部组件的形式如下：

var componentA={
     data(){
          return{
              text:"我是组件A"
          }
      },
      template:'<div>{{text}}</div>'
 }

局部组件就是定义一个普通的对象，对象里的值与全局第二个参数里面的内容是一模一样的，就是在用的时候，局部组件需要在Vue实例对象里面注册一下。

完整流程

html: （调用的话与全局组件一样）

 <div id="app">
       <component-a></component-a>
  </div>
  <template id="childrenOne">
       <div>
           {{text}}
       </div>
   </template>

js

 var componentA={
      data(){
          return{
              text:"我是组件A"
          }
      },
      template:'#childrenOne'
  }
  var vm = new Vue({
      el:'#app',
      components:{
          'component-a':componentA
      }
  })

注：
（1）同样局部组件也应该写在Vue实例的前面，要不会报错。
（2）在注册时也就是要调用时候的名字最好都是小写或者是kebab-case方式。要不也会报错。

总结：
全局组件与局部组件除了在定义时，一个是Vue.component一个是定义一个对象不太一样，里面写的内容是完全一模一样的，另外有一点区别就是局部组件需要注册一下，而全局组件不用注册。再次强调在注册的时候注意一下名字的规范。最后的调用也是一样的。无论是全局组件还是局部组件都没有变量提升，建议都把组件写在vue实例对象的前面