8.在组件中使用其他组件

Vue 2 入门学习笔记 /

本系列文章为laracasts.com 的系列视频教程——Learn Vue 2: Step By Step 的学习笔记。若喜欢该系列视频，可去该网站订阅后下载该系列视频，支持正版。

视频源码地址：github.com/laracasts/Vue-Forms

项目初始版本为Vue 2.1.3，教程还在更新中。

本节说明

对应第 8 小节：Components Within Components

本节内容

本节我们开始学习在组件中引入组件。上一节我们定义了一系列任务列表，本节我们定义一个task-list组件来显示任务列表：

main.js

Vue.component('task-list',{
    template:`
        <div>
            <task v-for="task in tasks">{{ task.description }}</task>
        </div>
    `,

    data() {
        return {
            tasks:[
                {description:'Go to work',completed:false},
                {description:'Go to bank',completed:false},
                {description:'Go to store',completed:false},
            ]
        }
    }
})

Vue.component('task',{
    template:'<li><slot></slot></li>'
});

new Vue({
    el:'#root'
})

然后使用该组件：

index.html

<!DOCTYPE html>

<html>
    <head>

    </head>

    <body>
        <div id="root">
            <task-list>Go to work</task-list>
        </div>

        <script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script>

        <script src="main.js"></script>
    </body>
</html>

查看效果：
file