slot 插槽

具名插槽 子组件给父组件留个位置需要父组件来填

App.vue

<template>
  <h1>父组件开始</h1>
  <Child>
    <template v-slot:rear>
      <p>我是rear部分</p>
    </template>
    <template v-slot:head>
      <p>我是head部分</p>
    </template>
  </Child>
  <h1>父组件结束</h1>
</template>

<script setup>
import Child from "@/components/Child.vue";
</script>

Child.vue

<template>
  <h2>子组件开始</h2>
  <slot name="head"></slot>
  <slot name="rear"></slot>
  <h2>子组件结束</h2>
</template>