Lzh on GitHub

Slot

将 Markdown 注入到你的 Vue 组件的最快方式。

当你在使用 MDC 语法的组件中编写内容和段落时，你可以使用 Vue 的 <slot> 组件来渲染这些内容。

用法

如果你不想修改渲染的内容，只需简单地使用 Vue 的 <slot> 组件。

components/content/Callout.vue
<template>
  <div class="callout">
    <slot />
  </div>
</template>

现在在 Markdown 中使用它：

content/index.md
::callout
This is a callout.
::

渲染的 HTML 将是：

<div class="callout">
  <p>This is a callout.</p>
</div>

这种用法类似于使用原生的 <slot> 组件。

解包

mdc-unwrap prop 允许你移除渲染内容中的一个或多个包裹元素。当你想要提取嵌套在原生 Markdown 语法中的内容时，这非常有用。每个指定的标签都将从抽象语法树 (AST) 中移除。

让我们从前面的示例中解包 <p> 元素：

components/content/Callout.vue
<template>
  <div class="callout">
    <slot mdc-unwrap="p" />
  </div>
</template>

现在渲染的 HTML 将是：

<div class="callout">
  This is a callout.
</div>

具名插槽

name prop 允许你通过名称绑定一个插槽。当你想要渲染一个非默认插槽时，这非常有用。

让我们改进我们的 Callout 组件，使其具有一个 title 插槽：

components/content/Callout.vue
<template>
  <div class="callout">
    <h2 v-if="$slots.title">
      <slot name="title" mdc-unwrap="p" />
    </h2>
    <slot />
  </div>
</template>
解决 Markdown 的默认包裹行为 Markdown 解析器会自动为段落文本添加 <p> 标签。
若直接通过 <slot /> 渲染，内容会被多余的 <p> 包裹，可能破坏布局或样式。mdc-unwrap 可以移除这些冗余标签。

现在在 Markdown 中使用它：

content/index.md
::callout
#title
Please be careful!
#default
Using MDC & Vue components is addictive.
::

这将产生：

<div class="callout">
  <h2>Please be careful!</h2>
  <p>Using MDC & Vue components is addictive.</p>
</div>

当不使用 title 插槽时，h2 元素将不会被渲染。

Props

  • mdc-unwrap: 是否解包内容。当你想要提取嵌套在原生 Markdown 语法中的内容时，这非常有用。每个指定的标签都将从抽象语法树 (AST) 中移除。
    • 类型： boolean 或 string
    • 默认值： false
    • 示例： 'p' 或 'ul li'
mdc-unwrap 属性支持指定多个值，用于同时移除多个包裹插槽内容的 HTML 标签。
适用场景：当插槽内容被多层嵌套标签包裹时（如 Markdown 解析后生成的 <p> 和 <blockquote>），需移除多个标签以保留纯净内容。