在 Vue 的递归组件中传递作用域槽

Question

我想实现 vue 组件 - 树。每个节点不知道如何显示自己，客户应该知道（见第 5 行）。我想为父节点和所有子节点设置作用域插槽。但是子数据没有传递到第 3 级正确显示。示例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

您可以像这样传递作用域插槽：

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