---
title: "useFetchComponentMeta"
description: "useFetchComponentMeta 获取通过 nuxt-component-meta 注册的 Vue 组件元数据，包括 Props、Events 和 Slots 的完整类型定义，返回 useAsyncData 的响应式 ref，支持 SSR 服务端渲染和客户端导航时自动复用缓存，零重复请求。"
seo_title: "useFetchComponentMeta"
seo_description: "Fetch Vue component metadata in Movk Nuxt Docs with useFetchComponentMeta, including props, events, slots, SSR data reuse, and cached navigation."
canonical_url: "https://docs.mhaibaraai.cn/docs/composables/fetch-component-meta"
---
# useFetchComponentMeta

> useFetchComponentMeta 获取通过 nuxt-component-meta 注册的 Vue 组件元数据，包括 Props、Events 和 Slots 的完整类型定义，返回 useAsyncData 的响应式 ref，支持 SSR 服务端渲染和客户端导航时自动复用缓存，零重复请求。

## 概述

获取 Vue 组件的元数据，包括 Props、Emits、Slots 等信息。返回 `useAsyncData` 的 ref 对象，支持客户端缓存复用。

```vue
<script setup lang="ts">
const { data: meta } = useFetchComponentMeta('MyButton')

console.log(meta.value?.meta?.props)  // Props 定义
console.log(meta.value?.meta?.events) // Events 定义
console.log(meta.value?.meta?.slots)  // Slots 定义
</script>
```

### 显示 Props 文档

```vue
<template>
  <ul>
    <li v-for="prop in (meta?.meta?.props || [])" :key="prop.name">
      <code>{{ prop.name }}</code>: {{ prop.type }}
    </li>
  </ul>
</template>

<script setup lang="ts">
const { data: meta } = useFetchComponentMeta('MyButton')
</script>
```

## API

### `useFetchComponentMeta(name)`

获取组件元数据。

### 参数

**name** (`string`) *required*: 组件名称（PascalCase）。

### 返回值

返回 `useAsyncData` 的结果对象。

**data** (`Ref<{ meta: ComponentMeta } | null>`): 组件元数据的响应式 ref，包含 props、events、slots 等信息。

## 相关

- [ComponentProps](/docs/components/component-props) — 在 Markdown 中一行代码生成 Props 文档表格
- [ComponentSlots](/docs/components/component-slots) — 自动生成 Slots 文档
- [ComponentEmits](/docs/components/component-emits) — 自动生成 Emits 文档

## Changelog

See commit history for [layer/app/composables/useFetchComponentMeta.ts](https://github.com/mhaibaraai/movk-nuxt-docs/commits/main/layer/app/composables/useFetchComponentMeta.ts).


## Sitemap

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