---
title: "ComponentEmits"
description: "ComponentEmits 通过 nuxt-component-meta 自动提取 Vue 组件的 defineEmits 定义，在 Markdown 文档中生成包含事件名称、参数类型和说明的 Emits 文档表格，无需手动编写事件 API 说明，与 ComponentProps 和 ComponentSlots 配合使用。"
seo_title: "ComponentEmits"
seo_description: "Generate Vue component emits documentation in Movk Nuxt Docs from defineEmits metadata, including event names, parameter types, and descriptions."
canonical_url: "https://docs.mhaibaraai.cn/docs/components/component-emits"
---
# ComponentEmits

> ComponentEmits 通过 nuxt-component-meta 自动提取 Vue 组件的 defineEmits 定义，在 Markdown 文档中生成包含事件名称、参数类型和说明的 Emits 文档表格，无需手动编写事件 API 说明，与 ComponentProps 和 ComponentSlots 配合使用。

## 用法

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

```vue
<template>
  <pre language=ts code=/**
   * Emitted events for the TestApi component
   */
  interface TestApiEmits {
    /**
     * 值变化时触发
     */
    change: (payload: [value: string]) => void;
    /**
     * 删除时触发
     */
    delete: (payload: []) => void;
  } />
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=:component-emits{slug="TestApi"}
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  :</span>
  <span class=swJcz>
  component-emits</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 ComponentEmits component
 */
interface ComponentEmitsProps {
  /**
   * 获取组件事件的 slug 标识
   */
  slug?: string | undefined;
}
```

## Changelog

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


## Sitemap

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