什么是组件
组件，其实很好理解，就是造轮子。比如，这里是一个任务列表：
<div id="tasklist">
<ul>
<li>做作业</li>
<li>写报告</li>
<li>读书</li>
<li>打扫</li>
</ul>
</div>我们完全可以将其封装成组件，然后写成以下这种形式：
<task-list>
<task>打扫房间</task>
<task>做作业</task>
<task>写报告</task>
<task>读书</task>
</task-list>这样做，可读性是不是提高了很多？而且也更利于复用。接下来我们来一步步实现任务列表组件
任务列表组件实现
Vue 注册组件，采用的是 Vue.component() 的方法，传入标签名与可选项。我们先来定义 task：
<div id="root">
<task>做作业</task>
<task>写报告</task>
<task>读书</task>
<task>打扫</task>
<task></task>
</div>
<script>
Vue.component('task',{
template:'<li><slot>默认内容</slot></li>'
})
new Vue({
el: '#root'
});
</script>template 用于定义组件的 HTML 视图。其中，<slot> 作为原始元素的插槽，自定义的内容将会取代 <slot>。如果没有自定义内容，就会显示默认的内容。
浏览器显示：
做作业
写报告
读书
打扫
默认内容现在，我们来定义 task-list 组件：
<div id="root">
<task-list></task-list>
</div>
<script>
Vue.component('task-list',{
template:`
<div>
<task>做作业</task>
<task>写报告</task>
<task>读书</task>
<task>打扫</task>
</div>
`
})
Vue.component('task',{
template:’<li><slot></slot></li>’
})
new Vue({
el: '#root'
});
</script>首先，创建了一个 task-list 组件，并且在组件中调用了 task 组件。组件模板必须包括一个共同的根元素，因此定义了一个根元素 div。
这样做不过是做了最简单的封装，我们希望任务列表以变量的方式传递进去，完全没问题。组件其实跟 Vue 实例类似，也可以使用 methods，computed 等。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.2.6/vue.js"></script>
</head>
<body>
<div id="root">
<task-list>
</task-list>
</div>
<script>
Vue.component('task-list',{
template:`
<div>
<task v-for="task in tasks">{{task.description}}</task>
</div>
`,
data () {
return {
tasks : [
{description:"编程",uncompleted:true},
{description:"锻炼",uncompleted:false},
{description:"阅读",uncompleted:true},
{description:"睡觉",uncompleted:false}
]
}
}
});
Vue.component('task',{
template:'<li><slot></slot></li>'
});
new Vue({
el: '#root'
});
</script>
</body>
</html>特别要注意的是，组件中的 data 需要使用函数形式。这是因为，假如使用 data 属性并且在视图中如果定义多个 <task-list></task-list>，那么它们之间就会共享该属性，造成相互影响。
本节只是初步了解组件，接下来会创建更为实用的组件。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。