组件二次封装时插槽传递方式

在Child.vue文件中引入HelloWorld.vue文件，需要对HelloWorld进行二次封装, Child.vue再引进到App.vue中HelloWorld里面有三个插槽，还有buttonText需要接收，还有传递一个lougout给App.vue
App.vue的代码

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

const onLogout = () => {
  console.log("退出登录")
}

</script>

<template>
<div>
  <Child buttonText="退出登录" @logout="onLogout">
    <template #header>
      <h1>header</h1>
    </template>
    <template #content="{ msg}">
      <p>{{msg}}</p>
    </template>
    <template #footer>
      <h1>Footer</h1>
    </template>
  </Child> 
</div>
</template>

Child.vue的代码

<script setup>
import HelloWorld from './HelloWorld.vue'
import {h,useAttrs,useSlots} from 'vue'
const Comp = h(HelloWorld, useAttrs(),useSlots())
</script>
<template>
  <div>
    <h1>Child组件</h1>
    <!-- 第一种方式 -->
    <!-- <HelloWorld v-bind="$attrs">
      <template v-for="(_,slot) in $slots" v-slot:[slot]="slotProps" :key="slot">
        <slot :name="slot" v-bind="slotProps"></slot>
      </template>
    </HelloWorld> -->
    <!-- 第二种方式 -->
    <!-- <Comp></Comp> -->
    <!-- 第三种方式 -->
    <component :is="h(HelloWorld, $attrs,$slots)"></component>
  </div>
</template>

image.png

结果如下：

image.png