什么是组件
组件（Component）是对数据和方法的简单封装。web中的组件其实可以看成是页面的一个组成部分，它是一个具有独立的逻辑和功能的界面，同时又能根据规定的接口规则进行相互融和，最终成为一个完整的应用，页面就是由一个个类似这样的组成部分组成的，比如导航、列表、弹窗、下拉菜单等。页面只不过是这样组件的容器，组件自由组合形成功能完整的界面，当不需要某个组件，或者想要替换某个组件时，可以随时进行替换和删除，而不影响整个应用的运行。、前端组件化的核心思想就是将一个巨大复杂的东西拆分成粒度合理的小东西。
使用提高开发效率、方便重复使用、简化调试步骤、提升整个项目的可维护性、便于协同开发。
vue作为一个轻量级前端框架，其核心就是组件化开发。
组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。
vue中，组件是可复用的 Vue 实例。因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
组件注册
全局注册
通过 Vue.component 来创建组件：
Vue.component('my-component-name', {
// ... 选项 ...
})这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。比如：
Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })new Vue({ el: '#app' })
<div id="app">
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>
</div>
在所有子组件中也是如此，也就是说这三个组件在各自内部也都可以相互使用。
局部注册
全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。
在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件：
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }然后在 components 选项中定义你想要使用的组件：
