javascript / expert
Snippet
Dynamische Komponentenauflösung in Render-Funktionen
Beim Schreiben manueller Render-Funktionen (h()) kann auf globale Komponenten nicht direkt per String-Name zugegriffen werden, wie es in Templates möglich ist. resolveComponent ermöglicht das programmatische Suchen von Komponenten, die in der App-Instanz oder im aktuellen Kontext registriert sind.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
import { h, resolveComponent } from 'vue';export default {props: ['type'],setup(props) {return () => {const Component = resolveComponent(props.type === 'admin' ? 'AdminPanel' : 'UserPanel');return h(Component, { class: 'dynamic-wrapper' });};}};
vue
Erklärung
1
resolveComponent('ComponentName');
Löst eine Komponentendefinition anhand des Namens aus dem Registrierungskontext auf.
2
h(Component, { ... });
Die Hyperscript-Funktion zur manuellen Erstellung von Virtual DOM-Knoten.
3
return () => { ... }
Das Zurückgeben einer Funktion aus setup definiert die Render-Logik der Komponente.