【学习前端第六十七课】组件的插槽

本文链接：https://blog.csdn.net/weixin_65729202/article/details/135692054

组件的插槽

组件本身是一个容器，也是一个vue对象（data,methods…）,也是一个虚拟DOM（html标签，但是这些html标签不是既定一些html标签，而是我们创建的所以也叫虚拟标签）

1、普通插槽

组件本身是一个容器，这个容器本身是空的，当我峨嵋你把需要封装的html标签装进这个组件之后，我们可以认为这个组件的内部的容积就直接塞满了，那就意味着，无法再向组件内部添加新的html结构，但是我们想在每次一个调用组件的时候，渲染一点个性化的东西进去，这个时候我们需要给组件去做一个预留空间，这个预留空间就是插槽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <one>
            <p>我是栏目一的内容</p>
            <!-- 这样插入时没有效果的 -->
        </one>
    </div>
    <template id="temp1">
        <div>
            <h2>我是标题</h2>
        </div>
    </template>
</body>
<script src="js/vue.js"></script>
<script>
    var one = {
     
     
        template:"#temp1"
    };
    new Vue({
     
     
        el:"#app",
        components:{
     
     
            one
        }
    })
</script>
</html>

以上的代码在渲染的时候，我们在虚拟DOM one的里面写入了一个p标签，这就是所谓的插入，但是这个并没有效果，因为我们并没有在one组件的内部留下预留空间，也就是插槽

如果想要在组件内部预留插槽，需要使用 <slot></slot> 的标签完成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <one>
            <p>我是栏目一的内容</p>
            <p>我是栏目一的内容</p>
            <p>我是栏目一的内容</p>
            <p>我是栏目一的内容</p>
            <p>我是栏目一的内容</p>
        </one>
    </div>
    <template id="temp1">
        <div>
            <h2>我是标题</h2>
            <slot>
                <!-- 
                    <p>我是栏目一的内容</p>
                    <p>我是栏目一的内容</p>
                    <p>我是栏目一的内容</p>
                    <p>我是栏目一的内容</p>
                    <p>我是栏目一的内容</p>
                 -->
            </slot> <!-- 这是预留的插槽 -->
        </div>
    </template>
</body>
<script src="js/vue.js"></script>
<script>
    var one = {
     
     
        template:"#temp1"
    };
    new Vue({
     
     
        el:"#app",
        components:{
     
     
            one
        }
    })
</script>
</html>

代码分析：

在上面的代码里面，我们在one这个虚拟标签插入了5个p标签，这个5个p标签会全部插入到slot的位置

一个插入点插入多个插槽

现在我们想让刚才的代码当中前3个p标签出现在标题的上方，后2个p标签出现在标签的下方，明显刚才的插槽肯定是不能的满足的，那么应该怎么写？

如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body