Vue 3 的 provide/inject 是跨层级依赖注入机制，推荐用 InjectionKey 类型化声明；需提供响应式数据（ref/reactive），支持全局 provide 和 inject 默认值/必填校验。
Vue 3 的 provide/inject 是专为跨层级数据传递设计的依赖注入机制，它不依赖 props 逐层透传，也不需要事件总线或全局状态管理，适合中后台项目里“页面 → 布局 → 头部/菜单/卡片”这类典型嵌套结构。
用 InjectionKey 类型化注入（推荐）
避免字符串 key 带来的类型丢失和运行时错误。TypeScript 下必须用 InjectionKey 显式声明注入标识：
- 在独立文件中定义 key，比如
keys.ts：
import { InjectionKey } from 'vue'
export const UserContextKey = Symbol() as InjectionKey> - 祖先组件中
provide时使用该 key：
import { provide, ref } from 'vue'
import { UserContextKey } from './keys.ts'
const user = ref({ name: '李四', role: 'admin' })
provide(UserContextKey, user) - 任意后代组件中
inject，自动获得类型推导：
import { inject } from 'vue'
import { UserContextKey } from './keys.ts'
const user = inject(UserContextKey)
// user 类型是 Ref| undefined，TS 可安全访问 user?.value.name
响应式数据要正确提供
provide 的值必须是响应式对象（ref、reactive 或 computed），否则后代组件无法响应更新：
Antd Vue Components
下载
学习并查找 ant-design-vue（Vue 3）组件的使用方式，包括变体、运行示例、Vue 3 SFC 代码以及关键 props/events/slots。当用户询问如何使用 ant-design-vue 时使用。
- ✅ 正确：提供
ref或reactive对象
provide('user', ref({ name: '王五' })) - ❌ 错误：提供普通对象字面量（会丢失响应性）
provide('user', { name: '王五' }) // 后代修改不会触发更新 - ⚠️ 注意：如果提供的是函数，需确保内部逻辑能访问到最新响应式状态（可结合
toRef或闭包）
应用级全局 provide（适合配置、工具实例）
在 main.ts 中对整个 App 提供依赖，所有组件都能注入：
- import { createApp } from 'vue'
import { ApiClient } from '@/utils/api'
const app = createApp(App)
app.provide('api', new ApiClient()) - 组件中注入：
const api = inject('api') - 适用于：API 客户端、国际化 i18n 实例、权限校验器等全局限定服务
注入时处理未提供的情况
inject 默认返回 undefined，但可设默认值或抛错提示：
- 提供默认值（非响应式）：
const user = inject(UserContextKey, ref({ name: '游客' })) - 强制要求提供（开发期报错）：
const user = inject(UserContextKey, null, true) // 第三个参数为 true 表示 required
if (!user) throw new Error('UserContext is missing')
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
