Jak działa provide/inject w Vue 3?

W Vue 3, provide/inject służy do przekazywania danych lub zależności od komponentu rodzica do potomków, omijając komponenty pośrednie.

• provide jest deklarowane w komponencie rodzica i udostępnia wartości.
• inject jest używane w komponentach potomnych do pobierania tych wartości.

Jest to wygodne do przekazywania ustawień globalnych, usług lub danych, które są potrzebne głęboko zagnieżdżonym komponentom, bez konieczności przekazywania propsów na każdym poziomie.

Przykład:

// Komponent rodzica
export default {
  setup() {
    provide('theme', 'dark')
  }
}

// Komponent potomny
export default {
  setup() {
    const theme = inject('theme')
    return { theme }
  }
}

W ten sposób, komponent potomny uzyskuje dostęp do wartości 'dark' dostarczonej przez rodzica.