vue -- 插槽 slot

最新推荐文章于 2023-11-15 11:01:56 发布

烟雨平生ing

最新推荐文章于 2023-11-15 11:01:56 发布

阅读量147

点赞数

分类专栏：大前端系列文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/qq_44058265/article/details/120640905

版权

大前端系列专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue中的插槽机制，通过实例展示了如何定义含有插槽的组件，以及如何使用组件来动态插入标题和数组数据。文章通过创建`todo`组件，`todo-title`和`todo-items`子组件，结合`v-bind`和`v-for`指令，展示了Vue的内容分发功能，使组件更加灵活和可复用。

摘要由CSDN通过智能技术生成

插槽

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>