スロット内の各要素をどのようにラップできますか？

Question

私はこの

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

ようなスロットを介してカスタムコンポーネントのリストを受け取り、Iは​​、例えば、Liタグとして、他の成分中の成分XおよびYをラップしたい成分（成分B）を書きました。

// 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

これは機能しますか？

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

その後、私は大人のバージョン（render function）なしでそれを作ることは不可能だと思い

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

Answer 2

を使用しています。

PS：機能をレンダリングすると混乱せずに、より詳細なコンポーネントのために私は、ハンドルの他の機能のために別のコンポーネントを挿入示唆例えば：

createElement(componentForMakeCoolThings,{props...})  

PS2：あなたが単一のファイルコンポーネントに以下のソリューションを使用することができます簡単に適合：

<script> 
    export default{ 
    render: function(createElement){ 
    } 
    } 
</script> 

Vue.component('makeLi',{ 
 
    render:function(createElement){ 
 
     var list = [] 
 
     this.$slots.default.forEach((element,index) => { 
 
      if(element.tag){ 
 
       list.push(createElement('li',{},[element])) 
 
       
 
      } 
 
     }); 
 

 
     return createElement('ul',{},list) 
 
    } 
 

 
}) 
 

 
new Vue({el:'#app'});

<script src="https://vuejs.org/js/vue.min.js"></script> 
 
<div id="app"> 
 
<make-li> 
 
<h1>test1</h1> 
 
<b>bold</b> 
 
<i>italic</i> 
 
</make-li> 
 

 

 
</div>