Vue(10) —— 插槽slot

最新推荐文章于 2024-08-26 01:39:32 发布

原来是小别扇

最新推荐文章于 2024-08-26 01:39:32 发布

阅读量189

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/Jzandth/article/details/108780248

版权

Vue 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了Vue.js中的插槽机制，它允许开发者在不修改组件视图的情况下，通过插槽插入任意内容，提高组件的灵活性和扩展性。示例展示了如何使用插槽动态替换标题和列表数据，强调了插槽在创建可复用组件时的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.什么是插槽

在 Vue.js 中咱们使用 slot 元素做为承载分发内容的出口，作者称其为插槽，能够应用在组合组件的场景中
在这里插入图片描述

2.怎么使用插槽

<div id="vue" >
    <p>学习路线</p>
    <ul>
        <li>java</li>
        <li>spring框架</li>
        <li>linux</li>
    </ul>
</div>

在这里插入图片描述
需求

写一些待办事项表，现在上面页面中的数据都是在前端写死的，是静态的，而真实业务中这些数据都应该是从数据库中查询出来的(每个人的数据应该是不一样的)，分析上面的数据，需要动态变化的数据就是title和li中的数据，需求看到这里是不是觉得我们在data中定义两个参数，一个title，一个集合(由li遍历输出)就可以满足需求了？
但是上面这么实现是不是前端的代码就被写死了？就是这里我不想放一个列表了，我想放一张图片，或者放一个链接，那么是不是还要去修改视图中的代码？
这个时候就显示出插槽的作用了，定义一个插槽，随便你往里面插入什么数据

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="vue" >
    <todo>
        <todo-items slot="items" v-for="item in todoItems" :item="item"></todo-items>
        <todo-title slot="title" :title="title"></todo-title>

    </todo>
</div>

<!--引入 JS 文件-->
<script src="../../../vue.js"></script>
<script type="text/javascript">
    Vue.component("todo",{
        template:"<div>\
                    <slot name='title'></slot>\
                    <ul>\
                        <slot name='items'></slot>\
                    </ul>\
                  </div>"

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

    var vm = new Vue({
        el: '#vue',
        data:{
            title:"Java学习路线",
            todoItems:["java基础","Java框架","Vue"]
        }
    });
</script>


</body>
</html>