如何将每个元素包装在插槽中？

Question

我写经由插槽可接受定制组件的列表这样

// Component A 
<div class="component-a"> 
    ... 
    <component-b> 
    <component-x></component-x> 
    <component-y></component-y> 
    </component-b> 
    ... 
</div> 

一个组分（组分B）和我想包装分量x和y在其他部件，如Li标签。

// Output 
... 
<ul> 
    <li><component-x></component-x></li> 
    <li><component-y></component-y></li> 
</ul> 
... 

我试着用

// Component B 
<div class="component-b"> 
    <ul> 
    <li v-for="item in $slots.default"> 
     <component :is="item"></component> 
    </li> 
    </ul> 
</div> 

它不工作。该项目是VNode对象，无法使用组件标记进行渲染。有没有解决这个问题的方法？

编辑：我的包装组件不是li标签，它是一个具有指定道具的自定义组件，我将它设置在组件B中。如果我从组件A包装它们，我需要重复编写自定义组件和其道具。

Edit2：渲染功能也许解决这个问题，但我正在寻找与HTML模板（单个文件组件）的解决方案。

Answer 1

This works？

<div class="component-a"> 
    <component-b> 
    <component-x></component-x> 
    <component-y></component-y> 
    </component-b> 
</div> 

然后使用

<div class="component-a"> 
    <component-b> 
    <ul> 
     <li><component-x></component-x></li> 
     <li><component-y></component-y></li> 
    </ul> 
    </component-b> 
</div>