Vuejs - 如何在使用插槽时呈现子组件的vnodes

如何从其子组件的父组件呈现vnodes。我有一个渲染函数，循环遍历这个中找到的一个子数组。$ slots.default。目的是用li标签包装儿童。Vuejs - 如何在使用插槽时呈现子组件的vnodes

问题是，儿童组件不渲染，我得到空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>

来源

2017-08-02 Kunle

您的小提琴更新。 https://jsfiddle.net/Lkbvpop5/5/ – Bert

createElement需要的vnode的阵列。它应该像这样工作：

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

来源

2017-08-02 04:49:06 blockhead

Vuejs - 如何在使用插槽时呈现子组件的vnodes

回答

相关问题