关于插槽的额外补充

• 默认情况
  1、创建ssolt.vue文件，写插槽内容（三种插槽声明方式）

<template>
    <div>
        <p> 子vue的插槽内容</p>
 
        <!-- 第1种方式，默认插槽 -->
        <slot></slot>

        <!-- 第2种方式，插槽中有内容 -->
        <slot>
            <p> 子插槽的内容，第2种方式</p>
        </slot>

        <!-- 第3种方式，命名插槽 -->
        <slot name="solt1">
            <p> 子插槽的内容，第3种方式：solt1</p>
        </slot>

        <slot name="solt2">
            <p> 子插槽的内容，第3种方式：solt2</p>
        </slot>

        <slot name="solt3">
            <p> 子插槽的内容，第3种方式：solt3</p>
        </slot>

    </div>

</template>

<script>
</script>

<style>
</style>

2、创建psolt.vue，用来调用ssolt.vue的插槽，初始情况：

<template>
    <div>
        <p> 父vue的内容，使用插槽</p>
        <ssolt>
            <!-- <p>覆盖该vue中默认插槽的P标签内容</p> -->
        </ssolt>


    </div>
</template>

<script>
    import ssolt from './ssolt.vue'

    export default {
        name: "psolt",
        components: {
            ssolt
        }
    }
</script>

<style>
</style>

3、当前的页面情况：

初始状况

• 覆盖默认插槽的内容
  修改psolt.vue

<template>
    <div>
        <p> 父vue的内容，使用插槽</p>
        <ssolt>
            <p>覆盖该vue中默认插槽的P标签内容</p>
        </ssolt>


    </div>
</template>

覆盖默认插槽的内容

• 使用命名插槽
  修改psolt.vue

<template>
    <div>
        <p> 父vue的内容，使用插槽</p>
        <ssolt>
            <!-- <p>覆盖该vue中默认插槽的P标签内容</p> -->
            
            
            <!-- 使用命名插槽，V2.6版本前，方式1-->
            <p solt="solt1">
                V2.6使用命名插槽，覆盖插槽的内容
            </p>
            
            <!-- 使用命名插槽，V2.6版本后，方式1-->
            <template v-slot:solt2>
                V2.6使用命名插槽，覆盖插槽的内容，V2.6版本后，方式1
            <br/>
            </template>
            
            
            <!-- 使用命名插槽，V2.6版本后，方式2-->
            <template #solt3>
                <br/>
                V2.6使用命名插槽，覆盖插槽的内容，V2.6版本后，方式2
            </template>
            
        </ssolt>

    </div>
</template>

• 结果

  
  调用命名插槽并覆盖