Vuejs - 슬롯 사용 시 하위 구성 요소의 vnode를 렌더링하는 방법

Vuejs - 슬롯 사용 시 하위 구성 요소의 vnode를 렌더링하는 방법

하위 구성 요소의 상위 구성 요소에서 vnode를 렌더링하는 방법렌더링 기능이 있는데, 이 기능에서 발견된 일련의 아이들을 루핑하고 있다.$calf.default.그 목적은 아이들을 li 태그에 싸는 것이다.

문제는 아동 구성요소가 렌더링되지 않고 나는 빈 리 태그를 받는다는 것이다.여기에서 누락된 항목과 설명서에서 해결 방법을 찾을 수 있는 위치.Fiddle Can은 여기서 찾을 수 있고, 내장된 코드는 아래에 있다.

// 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일련의 vnode를 필요로 한다.다음과같이 작동해야 한다.

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

참조URL: https://stackoverflow.com/questions/45451150/vuejs-how-to-render-vnodes-of-child-components-when-using-slots