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

Question

如何从其子组件的父组件渲染 vnode。我有一个渲染函数，它循环遍历在 this.$slots.default 中找到的子数组。目的是将 child 包裹在 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]) 
})