vue组件递归的slot传递

组件递归 menuTree.vue

<template>
    <div class="menu-wrapper">
        <div v-for="item in treeMenu" :key="item.code" class="menu-group">
            <div class="menu-item-wrapper">
                <div class="menu-item" :class="{'p-menu': item.pcode === '0'}" :style="`--menu-item-left: ${depth*20+15}px`">
                    <img src="../../../static/images/dc-icon-arrow-down.png" alt="" v-show="item.children && item.children.length" class="icon-arrow">
                    <span class="blank" v-show="!item.children || !item.children.length"></span>
                    <span>{{ item.name }}{{ item.code }}</span>
                </div>
                <div v-show="item.children && !item.children.length">
                    <slot name="tableModule" :currentQuota="item"></slot>
                </div>
                <div class="sub-menu">
                    <template>
                        <menuTree :treeMenu="item.children" :currentQuota="item">
                            <template #tableModule="subItem">
                                <slot name="tableModule" :currentQuota="subItem"></slot>
                            </template>
                        </menuTree>
                    </template>
                </div>
            </div>
            
        </div>
    </div>
</template>

使用组件 index.vue

<menuTree :treeMenu="treeMenu">
        <template #tableModule="{currentQuota}">
          <div>{{ currentQuota.code }}</div>
          <tableModule :currentQuota="currentQuota"></tableModule>
        </template>
      </menuTree>