这个要单独写，原文是这么描述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> <my-component></my-component> </div>
渲染为：
<div> <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> //不用组件 //<my-component></my-component> </div>
经过试验，这种写法确实没错，也可以正常显示。问题来了，为什么第一种写法也是可以的，比较两处代码，发现第一种写法有一个注册过程，注册了一个my-component,最后使用的也是这个my-component，仔细想想，并不是说Vue实例可以使用template，而是向Vue注册了这个组件后，Vue实例就可以使用这个组件了，所以并不冲突。（吓死宝宝了- -）
想清楚这个后，再来考虑另外一个问题，这两种写法的区别在于哪里？
有没有发现，第二种写法其实是很有限制的，他替换了整个div，不管div中有多少内容。比如：
<div> ssssdfsdaf <button>abc</button> </div>
最后统统不见，被替换成<div>A cu stom component!</div>。灵活度太低，如果我只想替换ssssdfsdaf怎么办？所以就要用第一种方式了，于是幡然醒悟，原来这就是组件，就像一个零件一样，想往哪塞就往哪塞：
<div> <my-template>ssssdfsdaf<my-template> <button>abc</button> </div>
另外，注册必须在新建实例前，反过来的话，新建的实例肯定不能使用组件的。
原文还说replace可以决定是否替换，这个不知道咋用，先留一坑在这，后面看看能否用上。 //坑1
2.组件注册有两种方式：
一是前面看到的全局注册方式，Vue.component，这种全局可用。
二是局部注册方式
// 局部注册也可以这么做 var Parent = Vue.extend({ components: { 'my-component': { template: '<div>A custom component!</div>' } } })
这种写法最简，很明显Parent扩展了Vue，拥有了组件my-component。此时的组件只有Parent能用，Vue不能用。
3.is属性
组件在使用的过程中也是有限制的。原因在于：
Vue 的模板是 DOM 模板，使用浏览器原生的解析器而不是自己实现一个。所以组件被替换后必须依照html的正常标准来，它必须是有效的 HTML 片段。一些 HTML 元素对什么元素可以放在它里面有限制。常见的限制：
a 不能包含其它的交互元素（如按钮，链接）
ul 和 ol 只能直接包含 li
select 只能包含 option 和 optgroup
table 只能直接包含 thead, tbody, tfoot, tr, caption, col, colgroup
tr 只能直接包含 th 和 td
以table为例
<table> <my-component></my-component> <my-component></my-component> </table> // 定义 var MyComponent = Vue.extend({ template: '<tr>A custom component!</tr>' })
这样的写法看似正常，因为<table><tr></tr></table>结构是正常的，但是实际上不能依赖自定义组件在浏览器验证之前的展开结果，所以这里不被认为是<tr>。为此，is属性便有作用了，将以上写法改写：