vue.js – Vuejs – 如何在使用插槽时呈现子组件的vnode

2023年11月17日 308次阅读

如何从子组件的父组件中呈现vnode.

我有一个渲染函数,循环遍历在这个$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>

最佳答案 createElement采用一系列vnodes.

它应该像这样工作：

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