什么是组件
组件，其实很好理解，就是造轮子。比如，这里是一个任务列表：
- 做作业
- 写报告
- 读书
- 打扫
我们完全可以将其封装成组件，然后写成以下这种形式：
打扫房间 做作业 写报告 读书
这样做，可读性是不是提高了很多？而且也更利于复用。接下来我们来一步步实现任务列表组件
任务列表组件实现
Vue 注册组件，采用的是 Vue.component() 的方法，传入标签名与可选项。我们先来定义 task：
做作业 写报告 读书 打扫
template 用于定义组件的 HTML 视图。其中，<slot> 作为原始元素的插槽，自定义的内容将会取代 <slot>。如果没有自定义内容，就会显示默认的内容。
浏览器显示：
做作业写报告读书打扫默认内容
现在，我们来定义 task-list 组件：
首先，创建了一个 task-list 组件，并且在组件中调用了 task 组件。组件模板必须包括一个共同的根元素，因此定义了一个根元素 div。
这样做不过是做了最简单的封装，我们希望任务列表以变量的方式传递进去，完全没问题。组件其实跟 Vue 实例类似，也可以使用 methods，computed 等。
Document
特别要注意的是，组件中的 data 需要使用函数形式。这是因为，假如使用 data 属性并且在视图中如果定义多个 <task-list></task-list>，那么它们之间就会共享该属性，造成相互影响。
本节只是初步了解组件，接下来会创建更为实用的组件。