Ako funguje provide/inject vo Vue 3?

Vo Vue 3 sa poskytuje/inject sa používajú na prenos dát alebo závislostí od rodičovského komponentu k deťom, obchádzajúc medzičlánky.

• provide sa deklaruje v rodičovskom komponentu a poskytuje hodnoty.
• inject sa používa v detských komponentoch na získanie týchto hodnôt.

Je to užitočné na prenos globálnych nastavení, služieb alebo dát, ktoré sú potrebné hlboko zanořeným komponentom, bez nutnosti preposielať props na každej úrovni.

Príklad:

// Rodičovský komponent
export default {
  setup() {
    provide('theme', 'dark')
  }
}

// Detský komponent
export default {
  setup() {
    const theme = inject('theme')
    return { theme }
  }
}

Týmto spôsobom má detský komponent prístup k hodnote 'dark', ktorú poskytol rodič.