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>