vue3 默认插槽，具名插槽，动态插槽

1 Dialog.vue

<template>

  <div>

    <header class="header">

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

    </header>

    <main class="main">

      <div v-for="(item,index) in data" :key="item.age">

        <!-- 匿名插槽 --传值 -->

        <slot :data="item" :index="index"></slot>

      </div>

    </main>

    <footer class="footer">

      <slot name="footer"></slot>

    </footer>

  </div>

</template>

<script setup lang='ts'>

  import{ref,reactive} from 'vue'

  type names = {

    name:string,

    age:number

  }

  const data = reactive<names[]>([

    {

      name:"小满被插入了1",

      age:10,

    },

    {

      name:"小满被插入了2",

      age:20,

    },

    {

      name:"小满被插入了3",

      age:30,

    },

    {

      name:"小满被插入了4",

      age:40,

    }

  ])

</script>

2 index.vue

<div class="content">

      <Dialog>

        <!-- 具名插槽 可以简化 #header--对应name="header"-->

        <template #header>

          <div>

            插入头部

          </div>

        </template>

        <!-- 匿名插槽--v-slot="{data,index}" 也可以通过 #default -->

        <template #default="{data,index}">

          <div>

            {{ data.name }} -- {{ data.age }} -- {{ index }}

          </div>

        </template>

        <!-- 具名插槽 可以简化 #footer--对应name="footer"-->

        <template v-slot:footer>

          <div>

            插入尾部

          </div>

        </template>

        <!-- 动态具名插槽--会插入到 footer中 -->

        <template #[name]>

          <div>

            我在哪里

          </div>

        </template>

      </Dialog>

    </div>

<script setup lang='ts'>

import{ ref } from 'vue';

//footer或header 可以动态更改，default就中间了。

let name = ref('footer');

</script>