Passer les slots scopés dans un composant récursif dans Vue

Question

Je veux mettre en œuvre un composant Vue - arbre. Chaque nœud ne sait pas comment s'afficher, le client devrait le savoir (voir ligne 5). Je veux configurer des slots scopés pour le nœud parent et pour tous les enfants. Mais les données des enfants ne sont pas transmises pour être affichées correctement à partir du 3ème niveau. Exemple https://codepen.io/vlapenkov/pen/gOpbxRG?editors=1011

<div id="app" class="jstree jstree-default jstree-default-medium">
  <ul class="jstree-container-ul jstree-children jstree-no-icons">
    <tree-item
      v-for="(child, index) in treeData"
      :item="child"
      :is-last="treeData.length-1 === index"
      :level="0"
    >
      <template scope="shape">
        <div style="position:relative; display:inline-block;">{{ shape.name }}</div>
      </template>
    </tree-item>
  </ul>
</div>

<template id="item-template" >
  <li class="jstree-node" v-bind:class="className">
    <i class="jstree-icon jstree-ocl" v-on:click="toggle"></i>
    <a class="jstree-anchor" href="#" v-bind:class=" isSelected ? 'jstree-clicked':''">
      <i class="jstree-icon jstree-themeicon"></i>
      <span>{{item.name}}</span>
      <slot v-bind="item"></slot>
    </a>
    <ul v-show="isOpen" class="jstree-children">
      <tree-item
        v-for="(child, index) in item.children"
        :key="index"
        :item="child"
        :is-last="item.children.length-1 === index"
        :level="level+1"
      >
        <slot v-bind="child"></slot>
      </tree-item>
    </ul>
  </li>
</template>

Answer 1

Vous pouvez passer à travers les slots scopés comme ceci :

<template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope"><slot :name="slot" v-bind="scope"/></template>