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')