组件(Component)是Vue最强大的成果之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自界说元素，Vue的编译器为它添加特殊成果。
在有些情况下，组件也可以表示为用is特性进行了扩展的原生HTML元素。
所有的Vue组件同时也都是Vue的实例，所以可以接受不异的选项东西（除了一些根级特有的选项）并供给不异的生命周期钩子。

一 根本

以上是VUE组件的官方界说，让我说的直白一点，好比<button>Click</button>这个html的按钮就可以理解为一个组件，因为这么写就会展示出一个按钮在界面。

那么如果我写<button-demo>Click</button-demo>界面就不会有任何显示，因为浏览器不认识这个<button-demo>这个组件，html语法没有界说。

那么VUE的组件使我们有能通过现有的浏览器承认的组件自界说一个像是<button-demo>这样的组件的显示方法和内部运行逻辑。

举个栗子：

Vue.component(‘button-demo‘,{ template:‘<button>Hello here!</button>‘ })

通过Vue注册一个叫做‘button-demo‘的组件，这个自界说组件是由<button>Hello here!</button>构成的。

可以这么理解，注册了‘button-demo‘以后，<button-demo></button-demo>就等价于<button>Hello here!</button>

看一下演示效果

这里需要注意下，通过Vue注册的组件只能在Vue的注册范畴内用，就像演示里面一样，必需要<div></div>里面用。

二 进阶

VUE组件固然不成能就只能组合组合html标签，每一个VUE组件对相当于一个VUE实例，在组件内可以界说要领，数据，甚至可以引用其他组件

//界说button-counter组件 Vue.component(‘button-counter‘,{ //界说数据 data:function(){ return { count: 0 } }, //界说要领 methods:{ clickAdd: function(){ this.count++ } }, template:‘<button @click="clickAdd">You clicked me {{count}} times</button>‘ })

看一下演示效果

这里需要注意的是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:‘<div><p>这里是全局组件</p><component-b></component-b></div>‘, //使用components在父组件中注册局部组件 components:{ ‘component-b‘: { template:‘<button>这是一个局部组件</button>‘ }, } })

可以看到，我们把在component-a组件里使用了关键字components注册了一个局部组件component-b并且嵌入了component-a的模板语法中。

完整代码

四 注意问题 单个根元素

注意上面局部组件的阿谁例子，全局组件component-a的模板字符串是被一个<div>标签完全包裹起来的，是因为VUE规定每个组件必需只有一个根元素，所以不管你的组件由几多子元素构成，最外层都只有有且只有一个元素。

合理组织代码布局

同样是局部组件的阿谁例子，如果向下面这样写会不会更清楚大白一些：