[JavaScript知识库]vue -- 插槽 slot

插槽

Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 元素作为承载分发内容的出口。

• 插槽顾名思义，类似于卡槽，我们可以在卡槽中插入需要插入的卡
• 插槽内可以包含任何模板代码，包括 HTML，甚至其它的组件

演示

1、定义一个包含插槽slot的组件

• <slot name="todo-title"></slot> 用于插入标题
• <slot name="todo-items"></slot>用于插入数组数据

    Vue.component("todo",{
        template:'<div>\
                    <slot name="todo-title"></slot>\
                    <ul>\
                      <slot name="todo-items"></slot>\
                    </ul>\
                  </div>'
    });

2、动态获取标题和数组的组件

    Vue.component("todo-title",{
        props: ['title'],
        template:'<div>{{title}}</div>'
    });

    Vue.component("todo-items",{
        props: ['item'],
        template:'<li>{{item}}</li>'
    });

3、标题和数组需获取的数据

    var vm = new Vue({
        el: '#vue',
        data: {
            title: "课程",
            todoItems:['a','b','c']
        }
    });

4、view视图绑定需插入的组件
v-bind可省略

<!--view层颜板-->
<div id="vue">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
    </todo>
</div>