javascript / intermediate
Snippet
Komponenten-übergreifende Kommunikation mit Provide/Inject
Provide und Inject lösen das Problem des 'Prop-Drilling', bei dem Daten durch mehrere Ebenen von Komponenten gereicht werden müssen. Es ermöglicht einer Großeltern-Komponente, als Dependency-Provider für alle Nachkommen zu fungieren.
snippet.js
javascript
1
2
3
4
5
6
7
8
// Ancestor.vueimport { provide, reactive } from 'vue';const theme = reactive({ color: 'blue' });provide('app-theme', theme);// DeeplyNestedChild.vueimport { inject } from 'vue';const theme = inject('app-theme', { color: 'default' });
vue
Erklärung
1
provide('app-theme', theme)
Registriert eine Abhängigkeit, die von jeder Komponente im Unterbaum 'injiziert' werden kann.
2
inject('app-theme', ...)
Ruft die Abhängigkeit über den Schlüssel ab, mit einem optionalen Standardwert, falls der Provider fehlt.