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>

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

1 个答案: