Vue Markdown组件通过具名插槽分离渲染逻辑与样式控制：heading、blockquote、thematic-break、code-block等语义化元素各对应具名插槽，传递结构化数据；默认插槽兜底通用内容，配合scoped样式与CSS变量实现视觉定制，避免过度使用插槽。
Vue 插槽处理 Markdown 渲染的自定义需求，核心是把渲染逻辑和样式控制分开：解析器负责语义识别与数据组织，插槽负责外观呈现与交互定制。
用具名插槽接管语义化块级元素
标题、引用、代码块、分隔线这些有明确含义的结构，各自对应一个具名插槽。解析器不直接生成 HTML，而是触发对应插槽，并传入原始内容和元信息。
-
<slot name="heading" :level="2" :text="node.text"></slot>——支持统一处理所有层级，也方便加锚点或图标 -
<slot name="blockquote" :cite="node.cite"></slot>——透传引用来源，可用于右上角显示出处 -
<slot name="thematic-break"></slot>——比<hr>更准确，因***或---在 Markdown 中不等价于语义化分隔线 -
<slot name="code-block" :lang="node.lang" :highlighted="htmlString"></slot>——高亮结果由组件内部完成并透传，父组件只负责包裹和样式
用作用域插槽传递可操作的结构化数据
仅传文本无法支撑复杂样式或行为判断，必须暴露上下文信息，让父组件按需决策。
- 链接是否新窗口打开？传
:is-external="isExternal(node.href)"，父组件可动态加target="_blank"和rel="noopener" - 图片是否懒加载？传
:loading="'lazy'"，还可绑定class控制圆角/阴影，或加data-src实现渐进加载 - 表格是否斑马纹？传
:is-striped="true"和:headers、:rows，渲染逻辑完全交由使用者决定
默认插槽兜底 + scoped 样式隔离
段落、强调、无序列表等通用内容走默认插槽，避免每个小元素都写插槽造成冗余。
立即学习“前端免费学习笔记（深入）”；
- 组件根节点加
class="markdown-body"，所有默认内容包裹其中 - 样式中写
.markdown-body p { margin: 1.5em 0; }，不依赖全局重置库 - 若需微调文字颜色、字体大小等视觉细节，优先用 CSS 自定义属性（如
--md-text-color）配合:deep()，比空插槽更轻量
避开常见设计误区
不是所有定制都要靠插槽解决。插槽适合结构变更或行为增强，而非纯视觉微调。
- 想改
<blockquote></blockquote>左侧色条宽度？建议提供blockquote插槽，而不是开放 CSS 变量——变量难以精准作用于嵌套子元素 - 想统一调整所有标题的字号？用 CSS 变量即可，无需为每个
h1～h6单独设插槽 - 插槽命名须语义清晰一致，比如用
thematic-break而非hr，用image而非img，便于维护和协作
