什么是组件？
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。
所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。
任意的网页都可以切割成组件，可以迅速建立。
图片.png
使用组件
1.全局注册
我们知道，可以通过以下方式创建一个 Vue 实例：
new Vue({
el: '#some-element',
// 选项
})
{
// 选项
})
组件在注册之后，便可以作为自定义元素：
<my-component></my-component>
在一个模板中使用。请注意确保在初始化根实例之前注册组件。（上面就是注册组件的方式）
HTML:
<div id="example">
<my-component></my-component>
</div>
JS:
{
template: '<div>A custom component!</div>'
})
// 创建根实例
new Vue({
el: '#example'
})
将会渲染为：
<div id="example">
<div>A custom component!</div>
</div>
eg:
{
template: '<div>A custom component!</div>'
}) // 注册:component
var example = new Vue({
el:"#example",
}) // 实例化Vue
组件中，每个组件都有它对应的模板。
组件的操作：
1）定义组件。
2）注册组件。
1）定义组件：
Vue.extend() # Vue继承创建组件。
var app_nav = Vue.extend({
template: '<div>app_nav</div>'
})
注意：定义组件的时候，的template必须是最根部的tag，不能是多个。
template: '<div>123</div><div>456</div>'
这样的就是错误的。
2）注册组件
app_nav)
app_view)
组件等价：app-nav -> app_nav -> template( 也就是：<div>app_nav</div> )
Vue的组件，非常类似于自定义元素。它是Web组件规范的一部分。实际上Vue.js的组件语法参考了该规范。
Vue组件实现了Slot API 与 is 特性。但是，有几个关键的不同：
Web组件规范仍然远没有完成，并且没有浏览器实现。
相比之下，Vue.js组件不需要任何补丁，并且在所支持的浏览器（IE9 以及更高版本）之下表现一致。
必要的时候，Vue.js组件也可以放在原生自定义元素之内。
Vue.js组件提供了原生自定义元素所不具备的一些重要功能，比如组件间的数据流，自定义时间系统，以及动态的，带有特效的组件替换。
组件系统是使用Vue.js构建大型应用的基础。另外，Vue.js生态系统也提供了高级工具与多种支持库，它们和Vue.js一起构成了一个更加『框架』性的系统。