vue项目中slot的使用

r囧r小猫 2023-07-01 05:28 12阅读 0赞

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

案列如下：  
①SectionSet.vue是带有slot的一个组件  
②SlotTest.vue组件调用SectionSet.vue组件  
红色框是slotTest组件，绿色框是sectionSet组件，下面图片中真正使用slot的是“使用slot占个坑”这句话的<div标签  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]

代码如下：  
SectionSet.vue组件

<template>
        <div class="sectionSet">
            <div>
                <h3>
                    我是SectionSet,我在下面使用了 <slot >< /slot>
                </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 lang="stylus">
        .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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200119142401627.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ==,size_16,color_FFFFFF,t_70