一 基础组件(Component)是Vue最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue的编译器为它添加特殊功能。
在有些情况下，组件也可以表现为用is特性进行了扩展的原生HTML元素。
所有的Vue组件同时也都是Vue的实例，所以可以接受相同的选项对象（除了一些根级特有的选项）并提供相同的生命周期钩子。
以上是VUE组件的官方定义，让我说的直白一点，比如这个html的按钮就可以理解为一个组件，因为这么写就会展示出一个按钮在界面。
那么如果我写
那么VUE的组件使我们有能通过现有的浏览器认可的组件自定义一个像是
举个栗子：
Vue.component('button-demo',{
template:''})通过Vue注册一个叫做'button-demo'的组件，这个自定义组件是由组成的。
可以这么理解，注册了'button-demo'以后，
看一下演示效果
这里需要注意下，通过Vue注册的组件只能在Vue的注册范围内用，就像演示里面一样，必须要里面用。
二 进阶VUE组件当然不可能就只能组合组合html标签，每一个VUE组件对相当于一个VUE实例，在组件内可以定义方法，数据，甚至可以引用其他组件
//定义button-counter组件Vue.component('button-counter',{ //定义数据
data:function(){ return { count: 0
}
}, //定义方法
methods:{ clickAdd: function(){ this.count++
}
}, template:'You clicked me {{count}} times'}) 看一下演示效果
这里需要注意的是data并不是像这样直接提供一个对象：
data: { count: 0}取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝（看不懂记住就好，以后慢慢理解）：
data: function(){ return { count: 0
}
}三 全局注册与局部注册上面我们注册的是全局组件，也就是在整个VUE根实例中注册的，也可以理解为调用了VUE的静态方法注册的，这样注册的组件是可以在任何VUE实例中使用的。
不过这样也会带来作用域冲突的麻烦，比如我分别注册了一个前端HOME组件和一个后端ADMIN组件，又想注册两个HEAD组件分别用在HOME和ADMIN组件里面，代表前台后台不同的页头，这时候如果是全局注册为了区分不同的HEAD组件，我可能就需要为他们起两个名字，分别叫HOME_HEAD和ADMIN_HEAD。
但是局部组件注册就允许用户把自定义组件的作用域限制在父级VUE实例中：
//component-a是一个全局组件
Vue.component('component-a',{
template:'这里是全局组件
可以看到，我们把在component-a组件里使用了关键字components注册了一个局部组件component-b并且嵌入了component-a的模板语法中。
完整代码
四 注意问题单个根元素注意上面局部组件的那个例子，全局组件component-a的模板字符串是被一个标签完全包裹起来的，是因为VUE规定每个组件必须只有一个根元素，所以不管你的组件由多少子元素组成，最外层都只有有且只有一个元素。
合理组织代码结构同样是局部组件的那个例子，如果向下面这样写会不会更清楚明白一些：
//定义component-b组件变量component-b = {
template: ''}//定义component-a组间变量，并引用component-a变量component-a = {
template : '这是组件A
上面的代码将每个组件的代码赋值给了不同的变量，这样如果某个组件有变化，只用修改相应的变量，而不需要修改所有引用此变量的方法，实现了松耦合的编程思想。
特殊元素特殊对待有些 HTML 元素，诸如
- 、
- 、