组合API
依赖注入

provide()

提供可以被子组件注入的值。

类型

function provide<T>(key: InjectionKey<T> | string, value: T): void

详细信息
provide() 接收两个参数：键（可以是字符串或符号）和要注入的值。
当使用TypeScript时，键可以是转换为 InjectionKey 的符号 - 一个Vue提供的扩展 Symbol 的实用类型，可以用于在 provide() 和 inject() 之间同步值类型。
与生命周期钩子注册API类似，provide() 必须在组件的 setup() 阶段同步调用。

示例

vue

<script setup>
import { ref, provide } from 'vue'
import { countSymbol } from './injectionSymbols'

// provide static value
provide('path', '/project/')

// provide reactive value
const count = ref(0)
provide('count', count)

// provide with Symbol keys
provide(countSymbol, count)
</script>

另请参阅
- 指南 - Provide / Inject
- 指南 - 提供和注入类型

inject()

注入由祖先组件或应用程序（通过 app.provide()）提供的值。

类型

// without default value
function inject<T>(key: InjectionKey<T> | string): T | undefined

// with default value
function inject<T>(key: InjectionKey<T> | string, defaultValue: T): T

// with factory
function inject<T>(
  key: InjectionKey<T> | string,
  defaultValue: () => T,
  treatDefaultAsFactory: true
): T

详细信息
第一个参数是注入键。Vue 会沿着父组件链向上查找具有匹配键的提供值。如果父组件链中的多个组件提供了相同的键，则靠近注入组件的那个将“覆盖”链上更高的值。如果没有找到匹配的键的值，则 inject() 返回 undefined，除非提供了默认值。
第二个参数是可选的，当找不到匹配的值时将使用默认值。
第二个参数还可以是一个返回值昂贵的工厂函数。在这种情况下，必须将 true 作为第三个参数传递，以指示应将函数用作工厂而不是值本身。
与生命周期钩子注册 API 类似，inject() 必须在组件的 setup() 阶段同步调用。
当使用 TypeScript 时，键可以是 InjectionKey 类型 - 一个 Vue 提供的扩展 Symbol 的实用类型，可以用于在 provide() 和 inject() 之间同步值类型。

示例

假设父组件已提供值，如前面的 provide() 示例所示

vue

<script setup>
import { inject } from 'vue'
import { countSymbol } from './injectionSymbols'

// inject static value without default
const path = inject('path')

// inject reactive value
const count = inject('count')

// inject with Symbol keys
const count2 = inject(countSymbol)

// inject with default value
const bar = inject('path', '/default-path')

// inject with function default value
const fn = inject('function', () => {})

// inject with default value factory
const baz = inject('factory', () => new ExpensiveObject(), true)
</script>

另请参阅
- 指南 - Provide / Inject
- 指南 - 提供和注入类型

hasInjectionContext()

仅支持 3.3+

如果 inject() 可以使用而不会警告在错误的位置调用（例如在 setup() 之外），则返回 true。此方法旨在由想要内部使用 inject() 而不向最终用户发出警告的库使用。

类型
ts
```
function hasInjectionContext(): boolean
```

在 GitHub 上编辑此页面

组合API依赖注入 ​

provide() ​

inject() ​

hasInjectionContext() ​

组合API
依赖注入

provide()

inject()

hasInjectionContext()