Vue.js组件通信Slots内容分发在递归渲染文件夹树的应用-Vue.js-PHP中文网

vue.js 文件夹树通过递归组件配合作用域插槽实现灵活渲染：组件暴露 item 和 depth 上下文，调用方自定义节点内容，内部递归处理子节点，兼顾可定制性、响应式与性能优化。

vue.js组件通信slots内容分发在递归渲染文件夹树的应用

在用 Vue.js 渲染文件夹树（如资源管理器、目录结构面板）时，递归组件 + Slots 是实现灵活内容分发最自然的方式。核心在于：父组件不预先定义子节点模板，而是把渲染逻辑“交还”给调用方，让使用者决定每个节点显示图标、复选框、操作按钮等——而递归本身由子组件自主触发。

Slots 如何配合递归组件工作

递归组件（比如 FolderItem.vue）需同时满足两个条件：一是能接收并渲染自己的子节点（children），二是允许外部通过 slot 自定义节点内部结构。关键不是 slot 本身递归，而是组件在 slot 内部再次渲染自身实例。

组件接收 item（含 name、isFolder、children 等字段）和 depth（用于缩进或层级样式）
模板中用 <slot :item="item" :depth="depth"></slot> 暴露上下文，让父级可访问当前节点数据
若 item.children?.length 存在，则在 slot 内部再次渲染 <folderitem></folderitem>，传入子项和加深的 depth

用作用域插槽（Scoped Slot）传递控制权

真正让“内容可定制”的是作用域插槽。它把节点数据作为 prop 透出，调用方就能按需组合 UI 元素：

<folderitem :item="root" v-slot="{ item, depth }"><div class="node" :class="{ 'is-folder': item.isFolder }">
    <span class="icon">{{ item.isFolder ? '?' : '?' }}</span>
    <span class="label">{{ item.name }}</span>
    <button v-if="item.isFolder">{{ item.open ? '−' : '+' }}</button>
  </div>
  <!-- 子节点仍由 FolderItem 自己递归处理 -->
</folderitem>

注意：slot 内部不手动遍历 item.children，而是依赖组件内部的递归逻辑，否则会丢失响应式与生命周期控制。