vue项目中slot的使用

vue中的插槽————slot

插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。

案列如下：

①SectionSet.vue是带有slot的一个组件

②SlotTest.vue组件调用SectionSet.vue组件

红色框是slotTest组件，绿色框是sectionSet组件，下面图片中真正使用slot的是“使用slot占个坑”这句话的<div标签

代码如下：

SectionSet.vue组件

<template>
    <div class="sectionSet">
        <div>
            <h3>
                我是SectionSet,我在下面使用了 &lt;slot &gt;&lt; /slot&gt;
            </h3>
        </div>
        <div class="sectionHeader">
            <h3>{{title}}</h3>
        </div>
        <div class="sectionInfo">
            <slot></slot>
        </div>
    </div>
</template>

<script>
    export default {
        name: "SectionSet",
        props:{
            title:{
                required:true,
                default(){return ''}
            }
        },
        data(){
            return{}
        }
    }
</script>

<style scoped >
    .sectionSet{
        border:1px solid green;
        margin 20px
        .sectionHeader{
            width 1300px
            margin 0 auto
            h3{
                text-align center
            }
        }
        .sectionInfo{
            width: 1300px;
            margin:0 auto;
        }
    }

</style>
           

SlotTest.vue组件

<template>
    <div style="border:1px solid red;width: 100%;height: 400px; ">
        <div>
            <h3>我是SlotTest组件，我在下面调用了 SectionSet组件</h3>
            <section-set title="应用中心" >
                <div>
                    使用slot占个坑
                </div>
            </section-set>
        </div>

    </div>
</template>

<script>
    import SectionSet from "../../components/slots/SectionSet";
    export default {
        name: "SlotTest",
        components:{SectionSet}
    }
</script>

<style scoped>

</style>