Question

如何从子组件的父组件呈现vnode。我有一个渲染函数，循环遍历在这个$ slots.default中找到的子数组。目的是将孩子们包裹在li标签中。

问题是儿童组件没有渲染，我得到空的li标签。我在这里缺少什么，在文档中可以找到解决方案的位置。 The Fiddle Can be found here嵌入式代码如下。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

createElement获取一系列vnodes。它应该像这样工作：

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

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

1 个答案: