Vue插槽slot详解

最新推荐文章于 2024-08-15 12:28:07 发布

冷丁_

最新推荐文章于 2024-08-15 12:28:07 发布

阅读量280

点赞数 1

分类专栏： Vue精华讲解文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_41359998/article/details/122893885

版权

Vue精华讲解专栏收录该内容

17 篇文章 1 订阅

订阅专栏

本文介绍了如何使用Vue的插槽特性来组合组件，以创建一个动态的待办事项组件。通过定义`todo-title`和`todo-items`插槽，实现了待办标题和内容的动态绑定。在实例化Vue并初始化数据后，插槽内容被正确地插入到相应的组件中，展示了插槽在组件间传递内容和数据的能力。

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

Vue插槽slot详解

在 Vue 中我们使用元素，作为承载分发内容的出口，作者称其为插槽，可以应用在组合组件的场景中;

比如准备制作一个待办事项组件（todo），该组件由待办标题（todo-title）和待办内容（todo-items）组成，但这三个组件又是相互独立的，该如何操作呢？

demo

在这里插入图片描述
slot.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<!--view层 模版-->
<div id="app">
<!-- <p>列表书籍</p>-->
<!--    <ul>-->
<!--        <li>JAVA</li>-->
<!--        <li>C++</li>-->
<!--        <li>Go</li>-->
<!--    </ul>-->
    <todo>
        <todo-title slot="todo-title" v-bind:mytitle="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoItems" v-bind:myitem="item"></todo-items>
    </todo>
</div>
<script>
    Vue.component("todo",{
        template:'<div>\
                  <slot name="todo-title"></slot>\
                  <ul>\
                    <slot name="todo-items"></slot>\
                   </ul>\
                </div>'
    });
    Vue.component("todo-title",{
        props:['mytitle'],
       template: '<div>{{mytitle}}</div>'
    });
    Vue.component("todo-items",{
        props:['myitem'],
        template:'<li>{{myitem}}</li> '
    })
    var vm=new Vue({
        el:"#app",
        data:{
            title:"冷丁",
            todoItems:['JAVA','C++','Go']
        }
    });
</script>
</body>
</html>

首先定义了一个待办事项组件，需要让代办事项的标题和值实现动态绑定，我们可以使用插槽来实现。
定义一个名为todo-title的待办标题组件和todo-items的待办内容组件。
实例化Vue并初始化数据
将这些值通过插槽插入，注意插槽之间要相互关联，每个插槽也相当于一个组件，插槽也要像组件一样和相关数据进行绑定。

如果对您有帮助，免费的赞点一个～～～感谢🙏

在这里插入图片描述

冷丁_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue插槽slot详解

Vue插槽slot详解在 Vue 中我们使用元素，作为承载分发内容的出口，作者称其为插槽，可以应用在组合组件的场景中;比如准备制作一个待办事项组件（todo），该组件由待办标题（todo-title）和待办内容（todo-items）组成，但这三个组件又是相互独立的，该如何操作呢？demoslot.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫

专栏目录