递归组件 TreeView.vue
其中 treeButton 这个slot需要传递进递归的组件内

<template>
  <ul>
    <template v-for="item in treeData" :key="item.key">
      <li v-if="item.children" class="tree-branch">
        <div class="tree-branch-header" @click="toggleShowChildren(item)">
          <span class="tree-branch-name">
            <span class="tree-label">{{ item.title }}</span>
          </span>
          <slot name="treeButton" v-bind="item"></slot>
        </div>
        <tree-view v-if="item.showChildren" :data="item.children" :parent="item">
          <template #treeButton="subItem">
            <slot name="treeButton" v-bind="subItem"></slot>
          </template>
        </tree-view>
      </li>
      <li v-else class="tree-item">
        <span class="tree-item-name">
          <icon-font v-if="item.selected" icon="check" />
          <icon-font v-else icon="times" />
          <span class="tree-label">{{ item.title }}</span>
        </span>
        <slot name="treeButton" v-bind="item"></slot>
      </li>
    </template>
  </ul>
</template>

看下递归的部分

<tree-view v-if="item.showChildren" :data="item.children" :parent="item">
  <template #treeButton="subItem">
    <slot name="treeButton" v-bind="subItem"></slot>
  </template>
</tree-view>

最重要的就是

<template #treeButton="subItem">
  <slot name="treeButton" v-bind="subItem"></slot>
</template>

然后调用时传入slot

<tree-view
    tree-title="产品分类"
    :multiple="multiple"
    :data="treeData"
>
  <template #treeButton="{ key }">
    <span class="tree-button">
      <icon-font icon="edit" :size="17" class="m-r-5" @click.stop="handleEdit(key)" />
      <icon-font icon="ashbin" :size="17" class="m-r-5" @click.stop="handleDelete(key)" />
    </span>
  </template>
</tree-view>

效果如下图：