---
title: "ComponentSlots"
description: "ComponentSlots automatically generates complete slot documentation for Vue components via nuxt-component-meta, displaying every slot's name, scoped variable types, and description in a single line of Markdown, greatly reducing the effort of writing API documentation by hand."
canonical_url: "https://docs.mhaibaraai.cn/en/docs/components/component-slots"
---
# ComponentSlots

> ComponentSlots automatically generates complete slot documentation for Vue components via nuxt-component-meta, displaying every slot's name, scoped variable types, and description in a single line of Markdown, greatly reducing the effort of writing API documentation by hand.

## Usage

Use the `:component-slots` syntax in your Markdown documentation:

```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).

---

- [GitHub](https://github.com/mhaibaraai/movk-nuxt-docs/blob/main/layer/app/components/content/ComponentSlots.vue)


## Sitemap

See the full [sitemap](https://docs.mhaibaraai.cn/sitemap.md) for all pages.