Vuejs - 使用插槽时如何渲染子组件的 vnode

Question

如何从其子组件的父组件渲染 vnode。 我有一个渲染函数，它循环遍历 this.$slots.default 中的一组子项。目的是将孩子包装在 li 标签中。

问题是子组件不渲染，我得到空的 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 接受一个 vnode 数组。 它应该像这样工作：

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