Vuejs - スロットを使用するときに子コンポーネントのvnodeをレンダリングする方法

Question

子コンポーネントの親コンポーネントからvnodeをレンダリングする方法 私はこの中に見つかった子の配列をループしているレンダリング関数を持っています。$ slots.default。目的は子供をliタグで囲むことです。

問題は、子コンポーネントがレンダリングされず、空のタグが取得されるということです。私はここで何が紛失しているのか、その解決策はどこにあるのでしょうか。 The Fiddle Can be found here埋め込みコードは以下のとおりです。

// Parent component 
 
const MyParent = Vue.component('my-parent', { 
 

 
    render: function(createElement) { 
 
    var parentContent = createElement('h2', "These are Parent's Children:") 
 
    var myChildren = this.$slots.default.map(function(child) { 
 
     //console.log("Child: ", child) 
 

 
     return createElement(
 
     'li', 
 
     child 
 
    ) 
 
    }) 
 

 
    var content = [].concat(parentContent, myChildren) 
 

 
    return createElement(
 
     'div', {}, 
 
     content 
 
    ) 
 
    } 
 

 
}); 
 

 

 
// Child Component 
 
const MyChild = Vue.component('my-child', { 
 
    template: '<h3>I am a child</h3>' 
 
}); 
 

 

 

 
// Application Instance 
 
new Vue({ 
 
    el: '#app', 
 
    components: { 
 
    MyParent, 
 
    MyChild 
 
    } 
 
})

<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 

 
<div id="app"> 
 
    <my-parent> 
 
    <my-child></my-child> 
 
    <my-child></my-child> 
 
    </my-parent> 
 

 
</div>

Answer 1

createElement vノードの配列をとります。 これは次のように動作します。

return createElement(
    'li', 
    [child]) 
})