Vue.js 文件夹树通过递归组件配合作用域插槽实现灵活渲染：组件暴露 item 和 depth 上下文，调用方自定义节点内容，内部递归处理子节点，兼顾可定制性、响应式与性能优化。
在用 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>，传入子项和加深的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" @click="toggle(item)">{{ item.open ? '−' : '+' }}</button>
</div>
<!-- 子节点仍由 FolderItem 自己递归处理 -->
</FolderItem>注意：slot 内部不手动遍历 item.children，而是依赖组件内部的递归逻辑，否则会丢失响应式与生命周期控制。
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
立即学习“前端免费学习笔记（深入）”；
避免无限递归与性能陷阱
递归深度大时（如千级嵌套目录），直接全量渲染会导致卡顿。Slots 本身不解决性能问题，但为优化留出入口：
- 在组件内加
v-if="item.open || depth < 3"控制默认展开深度 - 用
<Teleport>或虚拟滚动包裹深层子节点（需配合item.height计算） - 将 slot 内容提取为具名插槽（如
#trigger、#content），便于单独 memoize 或懒编译 - 对频繁更新的节点（如带 checkbox 的多选状态），用
key="item.id"保证复用正确性
结合 Composition API 增强类型与复用性
使用 defineProps 明确声明 item: { name: string; isFolder: boolean; children?: Item[] } 类型，再配合 useSlots() 可在 setup 中判断是否提供了自定义 slot，从而降级为默认模板：
const slots = useSlots(); const hasCustomContent = !!slots.default;
这样既保持接口开放，又避免未传 slot 时渲染空白——对快速原型或内部组件库尤其有用。
