如何在另一个模板Vue.js中插入模板标签

Question

我正在尝试制作一个组件，该组件的插槽具有name属性，而另一个组件具有相同的结构。因此，我想将第二个组件放在第一个组件的内部，但放在另一个外部组件。

示例：

App.vue

<template>
    <ComponentA>
        <ComponentB>Hello World!</ComponentB>
    </ComponentA>
</template>

ComponentA.vue

<template>
    <div id="A">
        <slot name="a1"></slot>
        <slot name="a2"></slot>
    </div>
</template>

ComponentB.vue

<template slot="a2">
    <div id="B">
        <slot></slot>
    </div>
</template>

更新！

codesandbox

如果我写

<slot></slot>

代替

 <slot name='a2'></slot>

在ComponentA中它将起作用。但是我需要使用最后一种形式，因为我必须控制顺序。