Vue slot如何多级传递

Question

描述

现在共有三个组件：A、B、C。
C是B子组件，B是A子组件。现在C、B本身都有插槽，想在A组件中调用B时，直接使用C声明的插槽，如何实现呢？

代码

写了一段期望符合预期的代码。然而vue提示异常，求大佬指点
https://codesandbox.io/s/dawn...

Answer 1

app.vue

<B>
      <template #test> </template>
      <template #content>
        <!-- 期望template #content插槽能被完整注入到B，进而已当前插槽插入到C组件 -->
        顶级组件直接使用C组件的插槽
      </template>
    </B>

b.vue

<C>
      <slot name="test"> </slot>
      <template #content>
        <slot name="content" />
      </template>
      <!-- 
        ?期望 <slot name="test"></slot>能解析为如上格式
      -->
    </C>

c.vue

 <div class="C">
    <slot name="content"></slot>
  </div>