각 요소를 슬롯에 랩하려면 어떻게 해야 하나요?

각 요소를 슬롯에 랩하려면 어떻게 해야 하나요?

이렇게 슬롯을 통해 커스텀 컴포넌트 리스트를 접수하는 컴포넌트(컴포넌트 B)를 작성했습니다.

// Component A
<div class="component-a">
  ...
  <component-b>
    <component-x></component-x>
    <component-y></component-y>
  </component-b>
  ...
</div>

그리고 x와 y 컴포넌트를 li tag와 같은 다른 컴포넌트로 랩하고 싶습니다.

// Output
...
<ul>
  <li><component-x></component-x></li>
  <li><component-y></component-y></li>
</ul>
...

로 시도했다.

// Component B
<div class="component-b">
  <ul>
    <li v-for="item in $slots.default">
      <component :is="item"></component>
    </li>
  </ul>
</div>

동작되지 않습니다.항목이 VNode 개체이므로 구성 요소 태그로 렌더링할 수 없습니다.이 문제를 해결할 방법이 있나요?

편집: 제 랩 구성 요소는 li 태그가 아니라 특정 소품을 가진 커스텀 구성 요소로 구성 요소 B에 설정합니다.A 컴포넌트에서 랩을 하면 커스텀 컴포넌트와 소품을 반복해서 작성해야 합니다.

편집 2: 렌더링 기능으로 이 문제를 해결할 수 있지만 HTML 템플릿(단일 파일 컴포넌트)이 있는 솔루션을 찾고 있습니다.

어른 버전(렌더 기능)이 없으면 만들 수 없다고 생각합니다.

PS: 렌더 기능에 문제가 없는 보다 상세한 컴포넌트를 위해 다른 기능을 처리하기 위해 다른 컴포넌트를 삽입할 것을 권장합니다.예를 들어 다음과 같습니다.

createElement(componentForMakeCoolThings,{props...})    

PS2: 아래 솔루션을 단일 파일 컴포넌트로 간단하게 적용할 수 있습니다.

<script>
  export default{
     render: function(createElement){
     }
  }
</script>

Vue.component('makeLi',{
  render:function(createElement){
        var list = []
        this.$slots.default.forEach((element,index) => {
            if(element.tag){
                list.push(createElement('li',{},[element]))
                
            }
        });

        return createElement('ul',{},list)
    }

})

new Vue({el:'#app'});

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="app">
<make-li>
 <h1>test1</h1>
 <b>bold</b>
 <i>italic</i>
</make-li>


</div>

이거 돼요?

<div class="component-a">
  <component-b>
    <component-x></component-x>
    <component-y></component-y>
  </component-b>
</div>

그 후 사용

<div class="component-a">
  <component-b>
    <ul>
      <li><component-x></component-x></li>
      <li><component-y></component-y></li>
    </ul>
  </component-b>
</div>

언급URL : https://stackoverflow.com/questions/44966767/how-can-i-wrap-each-element-in-a-slot