Wie funktioniert provide/inject in Vue 3?

In Vue 3 wird provide/inject verwendet, um Daten oder Abhängigkeiten vom Eltern- zum Kindkomponenten zu übertragen, wobei Zwischenkomponenten umgangen werden.

• provide wird im Elternkomponenten deklariert und stellt Werte bereit.
• inject wird in den Kindkomponenten verwendet, um diese Werte zu erhalten.

Dies ist praktisch, um globale Einstellungen, Dienste oder Daten zu übertragen, die tief verschachtelte Komponenten benötigen, ohne Props durch jede Ebene weiterzugeben.

Beispiel:

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

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

Auf diese Weise erhält die Kindkomponente Zugriff auf den Wert 'dark', der vom Elternteil bereitgestellt wird.