vue3 - 13.插槽全家桶

vue3 - slot 插槽：插槽的作用是比如我们声明一个公共组件，在每个模块中引用公共组件的时候，可能某些模块的内容不一样，为了可以在单页面中方便自定义想要的内容。

1. slot匿名插槽：

我们声明一个子组件，在父组件中引用

index 父组件：

<template>
  <div>
    <Card>
      <template v-slot>
          匿名插槽插入成功
      </template>
    </Card>
  </div>
</template>
<script setup lang='ts'>
  import { ref } from 'vue'
  import Card from './components/Card.vue'
</script>
<style scoped>
</style>

Card 子组件：

<template>
    <div>
        <header></header>
        <section>
            <div>
                <slot></slot>
            </div>
        </section>
        <footer></footer>
    </div>
</template>
<script setup lang='ts'>
    import { ref } from 'vue'
</script>
<style scoped>
</style>

2. slot具名插槽：

index 父组件：

<template>
  <div>
    <Card>
      <template v-slot:header>
        <div>头部header内容</div>
      </template>
      <template v-slot:content>
        <div>中部content内容</d