vue3+ts插槽的使用

<template lang="html">
  <div>
    <!-- <Dialog>
      <template v-slot:header>
        <div>232</div>
      </template>
      <template v-slot="{ data, index }">
        <div>{{ data.name }}----{{ data.age }}sddssd{{ index }}</div>
      </template>
      <template v-slot:footer>
        <div>sdsdsggfhhg</div>
      </template>
    </Dialog> -->
    <!-- 第二种写法  -->
    <Dialog>
      <template #header>
        <div>232</div>
      </template>
      <template #default="{ data, index }">
        <div>{{ data.name }}----{{ data.age }}sddssd{{ index }}</div>
      </template>
      <template #footer>
        <div>sdsdsggfhhg</div>
      </template>
    </Dialog>
    <!-- 动态插槽 -->
    <Dialog>
      <template #[name]>
        <div>wodfgghfh</div>
      </template>
    </Dialog>
  </div>
</template>
<script lang="ts" setup>
import Dialog from "./components/dialog.vue";
import { ref } from "vue";
let name = ref("header");
</script>
<style lang="scss"></style>

组件：

<template lang="html">
  <div>
    <header class="header">
      <slot name="header"></slot>
    </header>
    <main class="main">
      <div v-for="(item, index) in data">
        <slot :data="item" :index="index"></slot>
      </div>
    </main>
    <footer class="footer">
      <slot name="footer"></slot>
    </footer>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
type names = {
  name: string;
  age: number;
};
const data = reactive<names>([
  {
    name: "小满被插入了",
    age: 122,
  },
  {
    name: "小满被插入了",
    age: 42,
  },
  {
    name: "小满被插入了",
    age: 54,
  },
  {
    name: "小满被插入了",
    age: 65,
  },
  {
    name: "小满被插入了",
    age: 54,
  },
]);
</script>
<style lang="scss">
.header {
  width: 100vw;
  height: 200px;
  background: red;
  color: #fff;
}
.main {
  width: 100vw;
  height: 200px;
  background: blue;
  color: #fff;
}
.footer {
  width: 100vw;
  height: 200px;
  background: green;
  color: #fff;
}
</style>