具名插槽

使用具体的名字，替换掉组件中具体名字的区域，v-slot：header也可以简写为#header

默认内容

在定义的插槽中填写的内容就是默认内容

条件插槽

可以根据传入的插槽名称，来判断，如果没有传入某个插槽的名称，则不渲染该部分插槽的内容，下面有按钮

举例

定义一个卡片组件

1. 卡片组件默认里面有3个插槽，中间插槽内容则为默认内容，如果没有传入插槽内容默认渲染这里默认的内容
2. $slots.content则是表示条件插槽，如果使用插槽的地方没有传入content插槽，则这个内容则不会渲染

<script setup>

</script>

<template>
  <div class="card_slot">
    <div class="header">
        <slot name="header">头部插槽</slot>
    </div>
    <div class="content" v-if="$slots.content">
        <slot name="content">内容插槽</slot>
    </div>
    <div class="footer">
        <slot name="footer">底部插槽</slot>
    </div>
  </div>
</template>

<style scoped>
</style>

使用插槽的组件

1. #是v-slot：的语法糖，#header即表示v-slot:header，会替换掉header的内容

<script setup>
import CardSlot from "@/components/CardSlot.vue"
</script>

<template>
  <div>
    <CardSlot>
      <template #header>
        <h1>Header</h1>
      </template>
    </CardSlot>
  </div>
</template>

<style scoped>
</style>

动态插槽

1. 也可以使用#["插槽名"]，来动态渲染想要展示的插槽内容。
2. 下面案例根据条件判断需要展示的插槽 Card组件代码

<script setup>

</script>

<template>
  <div class="card_slot">
    <div class="header">
        <slot name="header">头部插槽</slot>
    </div>
    <div class="content" v-if="$slots.content">
        <slot name="content">内容插槽</slot>
    </div>
    <div class="footer" v-if="$slots.footer">
        <slot name="footer">底部插槽</slot>
    </div>
  </div>
</template>

<style scoped>
.content{
    color: red;

}
.footer{
    color: blue;
}
</style>

使用Card组件的地方

<script setup>
import { ref, computed } from 'vue'
import CardSlot from "@/components/CardSlot.vue"

const slotFlag = ref(false)
const soltName = computed(() => slotFlag.value ? 'content' : 'footer');
const handleSolt = () => {
  slotFlag.value = !slotFlag.value
}

</script>

<template>
  <div>
    <button @click="handleSolt">动态决定渲染content还是footer</button>
    <CardSlot>
      <template v-slot:header>
        <h1>Header</h1>
      </template>
       <template #[soltName]>
        <h1>动态替换的区域，content文字为红色，footer文字为蓝色</h1>
      </template>
    </CardSlot>
  </div>
</template>

<style scoped>
</style>