组件化开发是前端所提倡的，当你掌握了基础内容之后，就可以对组件这一大块内容进行了解了，本章将向你介绍组件相关内容以及简单的组件案例。
本章主要内容：
一、什么是组件
二、如何使用组件
三、组件之间的通讯
组件的概念
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。
所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。
如何理解组件
简单理解，组件其实就是一个独立的html，它的内部可能有各种结构、样式、逻辑，某些地方来说有些像iframe，他都是在页面中引入之后展现另一个页面的内容，但实际上它与iframe又完全不同，iframe是一个独立封闭的内容，而组件既是一个独立的内容，还是一个受引入页面控制的内容。
为什么要使用组件
举个简单的列子，最近我的项目中有一个日历模块，有多个页面都日历，而每个页面的日历都存在一些差别，如果是不使用组件，我要完成这个项目，做到各个页面的日历大体一致，而部分地方存在差异，我可能就需要写几套日历代码了。
而使用组件呢？
一套代码，一个标签，然后分别在不同地方引用，根据不同的需求进行差异控制。
我可以通过给calendar传递值来实现在本页面对日历进行控制，让它满足我这个页面的某些单独需求。
有人会问，你calendar标签是什么鬼？前面有这么一句话，组件是自定义元素。calendar就是我自定义的元素。它就是一个组件。所以在项目中，你会发现有各种五花八门的标签名，他们就是一个个组件。
如何创建一个组件
我们把创建一个组件称为注册组件，如果你把组件理解成为变量，那么注册组件你就可以理解为声明变量。我们通过Vue.component来注册一个全局组件。
Vue.component(tagName, options)
tagName就是你组件的名称，也是你引入时候使用的自定义元素名称。
Vue.component('my-component', {
// 选项
})
notice：对于自定义标签的命名 Vue.js 不强制遵循 W3C 规则 (小写，并且包含一个短杠)，尽管这被认为是最佳实践。
当你注册好组件之后，你就可以使用你的自定义元素my-component在其他实例中使用了。但是有一点，你注册组件需要在你创建实例之前进行。
// 注册
Vue.component('my-component', {
template: 'this is my demo
'
})
// 创建根实例
new Vue({
el: '#example'
})
当代码执行之后，你的html代码将会被渲染为：
前面说把组件比作变量，组件也存在局部组件与全局组件，前面为大家展示的是全局组件，接下来为大家介绍局部组件。
当你的组件不是全局都需要的时候，你就可以将其注册为局部组件。通过某个实例或者其他组件进行注册，你所注册的组件的作用范围就只存在与这个实例或者组件的作用域。
var Child = {
template: 'this is my demo
'
}
new Vue({
// ...
components: {
// 将只在父组件模板中可用
'my-component': Child
}
})
关于组件使用的限制
当使用 DOM 作为模板时 (例如，使用 el 选项来把 Vue 实例挂载到一个已有内容的元素上)，你会受到 HTML 本身的一些限制，
因为 Vue 只有在浏览器解析、规范化模板之后才能获取其内容。
尤其要注意，像 、、、
