插槽机制使思维导图节点内容可定制：通过具名插槽（icon/content）分离图标与文本，作用域插槽传递节点数据实现动态渲染，配合flex布局与css类确保样式统一。
插槽让节点内容可定制
思维导图组件中每个节点默认只显示文字，但实际场景常需在文本旁加图标（如文档、链接、警告等），这时不能靠硬编码写死结构。Vue 插槽机制正好解决这个问题：子组件（节点）预留“坑位”，父组件决定填什么——比如一个图标 + 一段带样式的文本。
用具名插槽分发图标和文本
在自定义节点组件（如 mindmap-node.vue）里，定义两个具名插槽：icon 和 content：
-
<slot name="icon"></slot>放图标区域（可塞<svg></svg>、<i class="icon-pdf"></i>或动态组件） -
<slot name="content"></slot>放主文本，支持富文本、链接甚至按钮
父组件使用时按名投递：
<mindmap-node><template><svg viewbox="0 0 16 16" width="14" height="14"><path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zM5 8a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm7 0a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path></svg></template><template>用户权限配置</template></mindmap-node>
结合作用域插槽传递节点数据
图标和文本往往依赖节点原始数据（比如 category 字段决定图标类型）。这时要用作用域插槽，在子组件中把节点对象传出去：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 节点组件内：
<slot name="icon" :node="node"></slot> - 父组件中接收：
<template node>{{ node.category === 'api' ? '?' : '?' }}</template>
这样就能根据 node.category 动态渲染图标，无需在子组件里写一堆 v-if 判断逻辑。
配合 CSS 控制布局与对齐
图标和文本共存时，样式需协调。推荐在节点组件根元素上设 display: flex; align-items: center; gap: 6px;，再给插槽内容加类名约束尺寸：
<slot name="icon" class="node-icon"></slot><slot name="content" class="node-text"></slot>
然后在 CSS 中统一控制：.node-icon { flex-shrink: 0; width: 16px; height: 16px; }，避免文本过长时图标被压缩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
