12-插槽

 

 

<template>

  <indexVue>
    <!-- v-slot:header  可以简写成 #
    <template #header>
      <div>我是header插槽插入文本信息</div>
    </template> -->
    <template v-slot:header>
      <div>我是header插槽插入文本信息</div>
    </template>

    <template v-slot="{ data }">
      <div>我是匿名插槽文本 {{ data }}</div>
    </template>

    <template v-slot:footer>
      <div>我是footer插槽插入的文本信息</div>
    </template>
  </indexVue>


  <indexVue>
    <template #[name]>
      <div>我是动态插槽</div>
    </template>
  </indexVue>


</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import indexVue from './Tab/index.vue'

  let name = ref('footer') //header footer

</script>

<style lang="less" scoped>

</style>




<template>

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

    <main class="main">
      <div v-for="(item, index) in data" :key="index">
        <slot :data="item"></slot>
      </div>
    </main>

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

</template>

<script setup lang="ts">
import { reactive } from 'vue';

type names = {
  name: string,
  age: number,
}
const data = reactive<names[]>([
  {
    name: '测试1',
    age: 21
  },
  {
    name: '测试2',
    age: 22
  },
  {
    name: '测试3',
    age: 23
  },
  {
    name: '测试4',
    age: 24
  },
])
</script>

<style lang="less" scoped>
.header {
  height: 200px;
  background: red;
  color: #fff;
}
.main {
  height: 300px;
  background: green;
  color: #fff;
}
.footer {
  height: 200px;
  background: blue;
  color: #fff;
}
</style>