Nutzung der 'provide' und 'inject' Funktion in Vue.js

Die richtige Antwort auf die Frage nach dem Zweck der 'provide' und 'inject' Funktion in Vue.js ist, sie zu nutzen, um Daten ohne Props durch den Komponentenbaum weiterzugeben. Vue.js bietet diese Funktionen als eine Art, Daten von einem Elternteil zu einem Nachkommen zu übertragen, ohne dass jede Zwischenstufe des Komponentenbaums diese Daten explizit als Props weitergeben muss.

Anwendung von 'provide' und 'inject'

Nehmen wir an, Sie haben eine Komponentenhierarchie, in der eine Elternkomponente Daten hat, die tief in der Hierarchie benötigt werden. Normalerweise müsste man diese Daten durch alle untergeordneten Komponenten heruntergehen lassen, die keine Beziehung zu diesen Daten haben. Das macht den Code unübersichtlich und erhöht die Komplexität.

In solchen Fällen können Sie die 'provide' Funktion in der Elternkomponente verwenden, um die Daten bereitzustellen, und die 'inject' Funktion in der Nachfolgerkomponente, die die Daten benötigt.

// Elternkomponente
export default {
  provide() {
    return {
      data: this.data
    }
  },
  data() {
    return {
      data: 'Wert'
    }
  }
}

// Nachfolgerkomponente
export default {
  inject: ['data'],
  created() {
    console.log(this.data) // "Wert"
  }
}

Best Practices

Obwohl 'provide' und 'inject' sehr mächtig sein können, wird empfohlen, sie sparsam zu verwenden. Sie umgehen die normale Prop-Down / Event-Up-Kommunikation und können den Fluss der Daten innerhalb der Anwendung schwieriger zu verstehen machen. Darüber hinaus sollten sie nicht für die Verwaltung des globalen Zustands oder die Integration mit Drittanbieterbibliotheken verwendet werden, da es hierfür spezifischere und besser geeignete Tools gibt, wie z.B. Vuex.