Vue 2.0 入门系列（5）组件实例之任务列表

2024年5月22日 116次阅读 来源: 心智极客

什么是组件

组件，其实很好理解，就是造轮子。比如，这里是一个任务列表：

<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>，那么它们之间就会共享该属性，造成相互影响。

本节只是初步了解组件，接下来会创建更为实用的组件。

    原文作者：心智极客
    原文地址: https://segmentfault.com/a/1190000009204130
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞