脚本宝典收集整理的这篇文章主要介绍了Vue 2.0 入门系列(5)组件实例之任务列表,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
组件,其实很好理解,就是造轮子。比如,这里是一个任务列表:
<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
等。