---
title: "ComponentSlots"
description: "ComponentSlots 通过 nuxt-component-meta 自动为 Vue 组件生成完整的 Slot 插槽文档，在 Markdown 中一行代码即可展示所有插槽的名称、作用域变量类型和功能说明，大幅简化手写 API 文档的工作量。"
seo_title: "ComponentSlots"
seo_description: "Generate Vue component slot documentation in Movk Nuxt Docs with slot names, scoped variable types, and descriptions from component metadata."
canonical_url: "https://docs.mhaibaraai.cn/docs/components/component-slots"
---
# ComponentSlots

> ComponentSlots 通过 nuxt-component-meta 自动为 Vue 组件生成完整的 Slot 插槽文档，在 Markdown 中一行代码即可展示所有插槽的名称、作用域变量类型和功能说明，大幅简化手写 API 文档的工作量。

## 用法

在您的 Markdown 文档中使用 `:component-slots` 语法：

```vue
<template>
  <pre language=ts code=/**
   * Slots for the TestApi component
   */
  interface TestApiSlots {
    /**
     * 默认内容插槽
     */
    default(): any;
    /**
     * 头像插槽，作用域暴露头像地址
     */
    avatar(): any;
  } />
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=:component-slots{slug="TestApi"}
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  :</span>
  <span class=swJcz>
  component-slots</span>
  <span class=sMK4o>
  {</span>
  <span class=spNyl>
  slug</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  TestApi</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  }
  </span></span></code></pre></template>
</template>
```

## API

### Props

```ts
/**
 * Props for the ComponentSlots component
 */
interface ComponentSlotsProps {
  /**
   * 获取组件插槽的 slug 标识
   */
  slug?: string | undefined;
}
```

## Changelog

See commit history for [layer/app/components/content/ComponentSlots.vue](https://github.com/mhaibaraai/movk-nuxt-docs/commits/main/layer/app/components/content/ComponentSlots.vue).


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.