简单使用

TestView.vue

<script setup lang="ts">
</script>
<template>
<div class="parent">
    <slot>
    </slot>
</div>
</template>
<style scoped>
.parent {
    width: 100px;
    height: 100px;
    background-color: aquamarine;
}
</style>

HomeView.vue

<script setup lang="ts">
import TestView from '../views/TestView.vue'
</script>
<template>
  <div>
<TestView>
  <template v-slot>
    <p>HelloWOrld</p>
  </template>
</TestView>
  </div>
</template>
<style scoped>

</style>

具名插槽

TestView.vue

<script setup lang="ts"></script>
<template>
  <div class="parent">
    <slot name="header"></slot>
    <slot> </slot>
    <slot name="footer"></slot>
  </div>
</template>
<style scoped>
.parent {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
}
</style>

HomeVIew

<script setup lang="ts">
import TestView from '../views/TestView.vue'
</script>
<template>
  <div>
<TestView>
  <template v-slot:header>
    <p>header</p>
  </template>
  <template v-slot>
    <p>body</p>
  </template>
  <template v-slot:footer>
    <p>footer</p>
  </template>
</TestView>
  </div>
</template>
<style scoped>

</style>

作用域插槽

HomeView.vue

<script setup lang="ts">
import TestView from '../views/TestView.vue'
</script>
<template>
  <div>
<TestView>
  <template v-slot:header>
    <p>header</p>
  </template>
  <template v-slot="{data}">
    <p>body{{ data }}</p>
  </template>
  <template v-slot:footer>
    <p>footer</p>
  </template>
</TestView>
  </div>
</template>
<style scoped>

</style>

TestView.vue

<script setup lang="ts">
import {ref} from 'vue';
let data = ref("meowrain");
</script>
<template>
  <div class="parent">
    <slot name="header"></slot>
    <slot :data="data"> </slot>
    <slot name="footer"></slot>
  </div>
</template>
<style scoped>
.parent {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
}
</style>