Vue子组件如何向父组件内动态组件的插槽传递内容？

现有代码无法正常实现需求，期望渲染子组件中的标题，以下是当前代码：

Table组件 #

<template>
   <div>
      <slot name="header"></slot>
   </div>
</template>

父组件 #

<template>
   <div>
      <component :is="currentComponent" > </component> 
   </div>
 </template>
 <script>
 export default {
 data() {
   return {
      currentComponent: 'Table'
      };
   },
 };
 </script>

子组件 #

<template>
       <div>
         <parent-component> 
           <template slot="header">
              <h1>test</h1>
           </template>
         </parent-component>
     </div>
   </template>

解决方案 #

Table组件代码保持不变，修改父组件代码如下：

<template>
   <div>
      <component :is="currentComponent" >
         <template v-for="(_, name) in $slots" #[name]="slotData">
              <slot :name="name" v-bind="slotData || {}" />
         </template>
      </component> 
   </div>
 </template>
 <script>
 export default {
 data() {
   return {
      currentComponent: 'Table'
      };
   },
 };
 </script>

子组件代码无需修改。

内容的提问来源于stack exchange，提问作者Elior Zur