【Vue3】插槽全家桶

插槽（Slots）是 Vue.js 框架中的一个功能，允许在组件内部预留一些可替换的内容。通过插槽，可以给父组件填充模板代码，让父组件向子组件传递自定义的内容，以便在子组件中进行展示或处理。

1. 匿名插槽

Son.vue

<template>
  <div>
    <header class="header"></header>
    <main class="main">
      <slot></slot>
    </main>
    <footer class="footer"></footer>
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped>
.header {
  height: 200px;
  background-color: red;
  color: white;
}

.main {
  height: 300px;
  background-color: blue;
  color: white;
}

.footer {
  height: 200px;
  background-color: green;
  color: white;
}
</style>

App.vue

<template>
  <div class="content">
    <Son>
      <template v-slot>
          <div>插入中间</div>
      </template>
    </Son>
  </div>
</template>

<script setup lang="ts">
import Son from './components/Son.vue'
</script>

<style scoped>

</style>

2. 具名插槽

Son.vue

<template>
  <div>
    <header class="header">
      <slot name="header">slot>
    header>
    <main class="main">
      <slot>slot>
    main>
    <footer class="footer">
      <slot name="footer">slot>
    footer>
  div>
template>

<script setup lang="ts">

script>

<style scoped>
.header {
  height: 200px;
  background-color: red;
  color: white;
}

.main {
  height: 300px;
  background-color: blue;
  color: white;
}

.footer {
  height: 200px;
  background-color: green;
  color: white;
}
style>

App.vue

<template>
  <div class="content">
    <Son>
      <template v-slot:header>
          <div>插入上面div>
      template>
      <template v-slot>
          <div>插入中间div>
      template>
      <template v-slot:footer>
          <div>插入下面div>
      template>
    Son>
  div>
template>

<script setup lang="ts">
import Son from './components/Son.vue'
script>

<style scoped>

style>

3. 插槽作用域

Son.vue

<template>
  <div>
    <header class="header">
      <slot name="header">slot>
    header>
    <main class="main">
      <div v-for="(item,index) in data">
        <slot :index="index" :data="item">slot>
      div>
    main>
    <footer class="footer">
      <slot name="footer">slot>
    footer>
  div>
  
template>

<script setup lang="ts">
import { reactive } from 'vue';
type names = {
  name: string,
  age: number
}
const data = reactive<names[]>([
  {
    name: '张三', 
    age: 18
  },
  {
    name: '李四',
    age: 19
  },
  {
    name: '王五',
    age: 20
  }
])

script>

<style scoped>
.header {
  height: 200px;
  background-color: red;
  color: white;
}

.main {
  height: 300px;
  background-color: blue;
  color: white;
}

.footer {
  height: 200px;
  background-color: green;
  color: white;
}
style>

App.vue

<template>
  <div class="content">
    <Son>
      <template v-slot:header>
      
        <div>插入上面div>
      template>
      
      <template v-slot="{ data, index }">
      
        <div>{{ data.name }}--{{ data.age }}--{{ index }}div>
      template>
      <template v-slot:footer>
        <div>插入下面div>
      template>
    Son>
  div>
template>

<script setup lang="ts">
import Son from './components/Son.vue'
script>

<style scoped>style>

4. 动态插槽

App.vue

<template>
  <div class="content">
    <Son>
      <template v-slot:[name]>
      
        <div>
          我在哪儿？
        div>
      template>
    Son>
  div>
template>

<script setup lang="ts">
import { ref } from 'vue'
import Son from './components/Son.vue'
let name = ref('footer')
// let name = ref('deault') // 插入中间的匿名插槽
script>

<style scoped>style>