具名插槽

1、子组件

<div>
   <slot name="header"></slot>
   <slot></slot>
   <slot name="foot"></slot>
</div>

父组件

<ParentPage>
  <template #header><p>头部</p></template>
  <template #body><p>内容</p></template>
  <template #foot><p>结尾</p></template>
</ParentPage>

条件插槽

1、子组件

<div>
   <div v-if="$slots.header" class="header">
     <slot name="header"></slot>
  </div>
  <div v-if="$slots.default" class="body">
    <slot></slot>
   </div>
  <div v-if="$slots.foot" class="foot">
     <slot name="foot"></slot>
  </div>
</div>

父组件

<ParentPage>
  <template #header><p>头部</p></template>
  <template #body><p>内容</p></template>
  <template #foot><p>结尾</p></template>
</ParentPage>

向具名插槽中传入 props

子组件

<slot name="header" :title="msg"></slot>

<script setup>
const msg = ref('我是在子组件中定义的数据')
</script>

父组件

<ParentPage>
  <template #header="slotProps"><p>{{ slotProps.title }}</p></template>
</ParentPage>