Vue.js

Appearance

Obsah stránky

Composition API: Dependency injection ​

provide() ​

Poskytuje hodnotu, která může být implementována komponentami potomka.

  • Typ

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

  • Podrobnosti

    provide() přijímá dva argumenty: klíč (injection key), kterým může být řetězec nebo symbol, a hodnotu, která má být implementována.

    Při použití TypeScriptu může být klíč symbolem přetypovaným jako InjectionKey - typem poskytovaným Vue, který rozšiřuje Symbol a který lze použít k synchronizaci typu hodnoty mezi provide() a inject().

    Podobně jako u API pro registraci lifecycle hooks musí být provide() voláno synchronně během setup() fáze komponenty.

  • Příklad

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

// poskytnutí statické hodnoty
provide('path', '/project/')

// poskytnutí reaktivní hodnoty
const count = ref(0)
provide('count', count)

// poskytnutí s klíčem typu Symbol
provide(countSymbol, count)
</script>

  • Viz také:

inject() ​

Implementuje hodnotu poskytnutou komponentou předka nebo aplikací (pomocí app.provide()).

  • Typ

    ts
    // bez výchozí hodnoty
function inject<T>(key: InjectionKey<T> | string): T | undefined

// s výchozí hodnotou
function inject<T>(key: InjectionKey<T> | string, defaultValue: T): T

// s tovární funkcí
function inject<T>(
  key: InjectionKey<T> | string,
  defaultValue: () => T,
  treatDefaultAsFactory: true
): T

  • Podrobnosti

    První argument je klíč pro implementaci (injection key). Vue se bude procházet hierarchií rodičovských komponent, aby našelo poskytovanou hodnotu s odpovídajícím klíčem. Pokud více komponent v hierarchii poskytuje stejný klíč, ten z nejbližší komponenty „překryje“ ty výše v řetězci. Pokud nebyla nalezena žádná hodnota s odpovídajícím klíčem, inject() vrátí undefined, pokud není poskytnuta výchozí hodnota.

    Druhý argument je volitelný a jde o výchozí hodnotou, která se použije, pokud nebyla nalezena žádná odpovídající poskytnutá hodnota.

    Druhý argument může být také tovární funkce, která vrací hodnoty, které jsou nákladné na vytvoření. V tomto případě musí být jako třetí argument předáno true pro indikaci, že by měla být funkce použita jako tovární metoda místo samotné hodnoty.

    Podobně jako u API pro registraci lifecycle hooks, musí být inject() voláno synchronně během setup() fáze komponenty.

    Při použití TypeScriptu může být klíč typu InjectionKey - typu poskytovaného Vue, který rozšiřuje Symbol a který lze použít k synchronizaci typu hodnoty mezi provide() a inject().

  • Příklad

    Za předpokladu, že rodičovská komponenta poskytuje hodnoty, jak je ukázáno v předchozím příkladu provide():

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

// implementace statické hodnoty bez výchozí hodnoty
const path = inject('path')

// implementace reaktivní hodnoty
const count = inject('count')

// implementace s použitím klíče typu Symbol
const count2 = inject(countSymbol)

// implementace s výchozí hodnotou
const bar = inject('path', '/default-path')

// implementace s výchozí hodnotou ve formě funkce
const fn = inject('function', () => {})

// implementace s výchozí hodnotou ve formě tovární funkce
const baz = inject('factory', () => new ExpensiveObject(), true)
</script>

  • Viz také:

hasInjectionContext() ​

Vrací true, pokud může být funkce inject() použita, aniž by vyvolala varování, že je volána na špatném místě (např. mimo setup()). Tato metoda je navržena pro použití v knihovnách, které chtějí používat inject() interně bez výpisu varování pro koncové uživatele.

  • Typ

    ts
    function hasInjectionContext(): boolean

Navrhněte úpravu této stránky na GitHubu