默认插槽

// 子组件
<button>
    <slot></slot>
</button>

// 父组件
<childer-button>提交</childer-button>

具名插槽

// 子组件
<header>
    <slot name="header"></slot>
</header>
// 父组件
<childer-header>
    <template v-slot:header>
        插槽的内容放在这里
    </template>
    <template #header>
        v-slot 对应简写 #
    </template>
</childer-header>

动态插槽名

<base-layout>
    <template v-slot:[dynamicSlotName]>
        ...
    </template>
    <!-- 缩写为 -->
  <template #[dynamicSlotName]>
    ...
  </template>
</base-layout>

作用域插槽

##子组件将一部分数据在渲染时提供给插槽, 向一个插槽的插口上传递 attribute：
// 子组件
<div>
    <slot text="madongmei" :count="1"></slot>
</div>
// 父组件
<childer-component v-slot="slotProps">
    {{ slotProps.text }} {{ slotProps.count }}
</childer-component>

具名作用域插槽

// 子组件
let obj = {
    name: 'madongmei',
    age: 18
}
<div>
    <slot name="item" v-bind="obj"></slot>
</div>
// 父组件
<childer-component>
    <template #item="{ name, age }">
        <p>{{ name }}</p>
        <p>{{ age }}</p>
    </template>
</childer-component>