---
title: "ComponentCode"
description: "ComponentCode 让作者在 Markdown 中以声明式属性矩阵驱动任意已注册的 Vue 组件实时渲染，并同步合成可复制粘贴的 Vue 代码片段。"
seo_title: "ComponentCode"
seo_description: "Render any auto-imported Vue component live and synthesize a copy-paste Vue snippet that updates as readers tweak props."
canonical_url: "https://docs.mhaibaraai.cn/docs/components/component-code"
---
# ComponentCode

> ComponentCode 让作者在 Markdown 中以声明式属性矩阵驱动任意已注册的 Vue 组件实时渲染，并同步合成可复制粘贴的 Vue 代码片段。

## 用法

### 基本用法

最小示例：传入 `name`（PascalCase 的组件名）与初始 `props`，配合 `items` 给出可选项。

```vue
<template>
  <pre language=vue code=<template>
    <UBadge label="New" color="primary" variant="solid" />
  </template> />
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=::component-code
  ---
  name: UBadge
  props:
    label: New
    color: primary
    variant: solid
  items:
    color: [primary, secondary, success, warning, error, neutral]
    variant: [solid, outline, soft, subtle]
  ---
  ::
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  ::</span>
  <span class=swJcz>
  component-code
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  ---
  </span></span>
  <span class=line>
  <span class=swJcz>
  name</span>
  <span class=sMK4o>
  :</span>
  <span class=sfazB>
   UBadge
  </span></span>
  <span class=line>
  <span class=swJcz>
  props</span>
  <span class=sMK4o>
  :
  </span></span>
  <span class=line>
  <span class=swJcz>
    label</span>
  <span class=sMK4o>
  :</span>
  <span class=sfazB>
   New
  </span></span>
  <span class=line>
  <span class=swJcz>
    color</span>
  <span class=sMK4o>
  :</span>
  <span class=sfazB>
   primary
  </span></span>
  <span class=line>
  <span class=swJcz>
    variant</span>
  <span class=sMK4o>
  :</span>
  <span class=sfazB>
   solid
  </span></span>
  <span class=line>
  <span class=swJcz>
  items</span>
  <span class=sMK4o>
  :
  </span></span>
  <span class=line>
  <span class=swJcz>
    color</span>
  <span class=sMK4o>
  :</span>
  <span class=sMK4o>
   [</span>
  <span class=sfazB>
  primary</span>
  <span class=sMK4o>
  ,</span>
  <span class=sfazB>
   secondary</span>
  <span class=sMK4o>
  ,</span>
  <span class=sfazB>
   success</span>
  <span class=sMK4o>
  ,</span>
  <span class=sfazB>
   warning</span>
  <span class=sMK4o>
  ,</span>
  <span class=sfazB>
   error</span>
  <span class=sMK4o>
  ,</span>
  <span class=sfazB>
   neutral</span>
  <span class=sMK4o>
  ]
  </span></span>
  <span class=line>
  <span class=swJcz>
    variant</span>
  <span class=sMK4o>
  :</span>
  <span class=sMK4o>
   [</span>
  <span class=sfazB>
  solid</span>
  <span class=sMK4o>
  ,</span>
  <span class=sfazB>
   outline</span>
  <span class=sMK4o>
  ,</span>
  <span class=sfazB>
   soft</span>
  <span class=sMK4o>
  ,</span>
  <span class=sfazB>
   subtle</span>
  <span class=sMK4o>
  ]
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  ---
  </span></span>
  <span class=line>
  <span class=sMK4o>
  ::
  </span></span></code></pre></template>
</template>
```

> \[\!NOTE\]
> See: /docs/components/component-example#componentexampleextras
> 
> ComponentCode 与 ComponentExample 共用同一个 
> 
> ComponentExampleExtras
> 
>  扩展组件。

## API

### Props

```ts
/**
 * Props for the ComponentCode component
 */
interface ComponentCodeProps {
  name: string;
  props?: Record<string, any> | undefined;
  items?: Record<string, any[]> | undefined;
  model?: string[] | undefined;
  external?: string[] | undefined;
  hide?: string[] | undefined;
  ignore?: string[] | undefined;
  slots?: Record<string, any> | undefined;
  /**
   * 是否使用 Prettier 格式化代码
   * @default "false"
   */
  prettier?: boolean | undefined;
  /**
   * 是否折叠代码块
   */
  collapse?: boolean | { icon?: string | undefined; name?: string | undefined; openText?: string | undefined; closeText?: string | undefined; open?: boolean | undefined; } | undefined;
  highlights?: number[] | undefined;
  overflowHidden?: boolean | undefined;
  elevated?: boolean | undefined;
}
```

## Changelog

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


## Sitemap

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