組合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()