<template>
  <div>
    <div class="header">
      <div class="header__text">标题</div>
      <div class="header_extra">
         <slot name="header-extra"></slot>
      </div>
    </div>
    <div class="body">
       <slot></slot>
    </div>
  </div>
</template>

<template>
   <template #header-extra>
      extra
  </template>
   <template #default>
      body
  </template>
</template>

<template>
   <template #header-extra>
      extra2
  </template>
   <template #default>
      body2
  </template>
</template>

<script setup>
import Child1 from "./Child1.vue";
import Child2 from "./Child2.vue";
</script>

<template>
  <Parent>
     <component :is="Child1"/>
  </Parent>
</template>