这个要单独写，原文是这么描述vue的组件的：组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。
这个特性我感觉比较难理解，一步步来，看看组件到底是个什么东西？
1.举个栗子
//model层：
// 通过extend方式定义一个Vue组件
var MyComponent = Vue.extend({
template: '<div>A custom component!</div>'
})
// 向Vue注册这个组件，名称定为my-component
Vue.component('my-component', MyComponent)
// 创建根实例
new Vue({
el: '#example'
})
//Vue层：
<div id="example">
<my-component></my-component>
</div>渲染为：
<div id="example">
<div>A custom component!</div>
</div>就是这个栗子，差点把我忽悠了，以为前面对extend的概念理解错了。还记得前面是这么描述
var MyComponent = Vue.extend（）的，Vue相当于基类，MyComponent继承了Vue，拥有了Vue的属性和方法，但是继承的概念还有另一层，就是基类是木有子类自定义的属性和方法的。这里的子类MyComponent扩展了一个属性template，按照继承的说法，Vue基类是不能使用的，但是这个栗子看似违背了这个规则，最后创建的是Vue实例，同时让模板生效了。正常的写法不是应该这样：
//model层：
// 通过extend方式定义一个Vue组件
var MyComponent = Vue.extend({
template: '<div>A cu stom component!</div>'
})
// 不用注册
//Vue.component('my-component', MyComponent)
// 创建MyComponent 实例
new MyComponent ({
el: '#example'
})
//Vue层：
<div id="example">
//不用组件
//<my-component></my-component>
</div>经过试验，这种写法确实没错，也可以正常显示。问题来了，为什么第一种写法也是可以的，比较两处代码，发现第一种写法有一个注册过程，注册了一个my-component,最后使用的也是这个my-component，仔细想想，并不是说Vue实例可以使用template，而是向Vue注册了这个组件后，Vue实例就可以使用这个组件了，所以并不冲突。（吓死宝宝了- -）
想清楚这个后，再来考虑另外一个问题，这两种写法的区别在于哪里？
有没有发现，第二种写法其实是很有限制的，他替换了整个div，不管div中有多少内容。比如：
<div id="example">
ssssdfsdaf
