Jak funguje provide/inject ve Vue 3?

Ve Vue 3 se používá provide/inject k přenosu dat nebo závislostí od rodičovského komponentu k potomkům, obcházejíc mezilehlé komponenty.

• provide je deklarováno v rodičovském komponentu a poskytuje hodnoty.
• inject se používá v dětských komponentách k získání těchto hodnot.

Je to užitečné pro přenos globálních nastavení, služeb nebo dat, která potřebují hluboce vnořené komponenty, aniž by bylo nutné předávat props na každé úrovni.

Příklad:

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

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

Tímto způsobem má dětský komponent přístup k hodnotě 'dark', kterou poskytl rodič.