Dynamische Komponenten mit render-Funktionen
Komponenten nach Typ wechseln, Komponenten auflösen und Slots in render-Funktionen beibehalten
Dynamische Komponenten mit render-Funktionen ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Dynamische Komponenten in Render-Funktionen
Templates verwenden <component :is="...">, um Komponenten zur Laufzeit auszutauschen. In einer Render-Funktion erreichen Sie dasselbe mit den Resolve-Hilfsfunktionen und h.
resolveComponent
resolveComponent sucht anhand des registrierten Namens eine global oder lokal registrierte Komponente und gibt sie zur Verwendung mit h zurück.
import { h, resolveComponent } from "vue";
export default {
render() {
const Btn = resolveComponent("MyButton");
return h(Btn, null, () => "Click");
}
};resolveDynamicComponent
Wenn das Ziel ein registrierter Name, ein HTML-Tag oder ein Komponentenobjekt sein kann, verwenden Sie resolveDynamicComponent. Die Funktion unterstützt alle drei Fälle.
import { h, resolveDynamicComponent } from "vue";
h(resolveDynamicComponent(props.type));Den Type über Props bestimmen
Übergeben Sie den Komponentennamen über eine Prop und lösen Sie ihn bei jedem Rendern auf. Das entspricht in Render-Funktionen dem Einsatz von :is.
export default {
props: { type: String },
render() {
const Comp = resolveDynamicComponent(this.type);
return h(Comp, { msg: "hi" });
}
};Props weiterreichen
Verteilen Sie die eingehenden Attribute auf die aufgelöste Komponente, damit das dynamische Kind alles erhält, was dem Parent übergeben wurde.
setup(props, { attrs }) {
return () => h(
resolveDynamicComponent(props.type),
{ ...attrs }
);
}Slots weiterreichen
Slots erreichen ein Kind über das dritte Argument von h. Leiten Sie das Slots-Objekt des Parents direkt weiter, damit die dynamische Komponente sie rendert.
setup(props, { slots }) {
return () => h(
resolveDynamicComponent(props.type),
null,
slots
);
}Ein wiederverwendbarer Renderer
Die Kombination aus dem Weiterreichen von Attributes und Slots ergibt einen schlanken Wrapper, der jede Komponente anhand ihres Namens rendert und alle Werte durchreicht.
setup(props, { attrs, slots }) {
return () => h(
resolveDynamicComponent(props.is),
attrs,
slots
);
}Dynamische Renderer für Tabellenspalten
Datentabellen erlauben häufig, für jede Spalte eine eigene Renderer-Komponente anzugeben. Speichern Sie den Komponentennamen pro Spalte und lösen Sie ihn für jede Zelle auf.
const columns = [
{ field: "name", renderer: "TextCell" },
{ field: "price", renderer: "MoneyCell" }
];Zellen dynamisch rendern
Lösen Sie für jede Spalte ihren Renderer auf und übergeben Sie den Zellwert als Prop. Eine Schleife steuert dabei unterschiedliche Zelltypen.
render() {
return h("tr", null,
columns.map((col) =>
h("td", null, [
h(resolveDynamicComponent(col.renderer), {
value: this.row[col.field]
})
])
)
);
}Auf ein Tag zurückfallen
Wenn resolveDynamicComponent einen nicht registrierten Namen erhält, behandelt die Funktion ihn als Zeichenfolge für ein natives Element. Dadurch rendert "div" sicher ein echtes Div.
h(resolveDynamicComponent("div"), { class: "box" }, "fallback");Warum hier Render-Funktionen verwendet werden
Render-Funktionen spielen ihre Stärken aus, wenn die Struktur berechnet wird – etwa bei einer variablen Anzahl von Kindern, komponentenabhängigen Elementtypen oder Logik, die in Templates viele verschachtelte Bedingungen erfordern würde.
Kurztest
Welche Hilfsfunktion löst sicher ein Ziel auf, das entweder ein Komponentenname oder ein natives HTML-Tag sein kann?
Zusammenfassung
Verwenden Sie resolveComponent für registrierte Namen und resolveDynamicComponent, wenn das Ziel auch ein HTML-Tag oder ein Komponentenobjekt sein kann. Reichen Sie attrs als Props weiter und übergeben Sie das slots-Objekt als drittes h-Argument. Dieses Muster bildet die Grundlage für dynamische Renderer von Tabellenspalten und flexible Wrapper.
Häufig gestellte Fragen
Ist die Lektion „Dynamische Komponenten mit render-Funktionen“ kostenlos?
Ja — der vollständige Text von „Dynamische Komponenten mit render-Funktionen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Dynamische Komponenten mit render-Funktionen“?
Komponenten nach Typ wechseln, Komponenten auflösen und Slots in render-Funktionen beibehalten Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Dynamische Komponenten mit render-Funktionen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Die Funktion h() im Detail
- JSX in Vue 3 mit Vite
- Dynamische Komponenten mit render-Funktionen
- Muster der Higher-Order Components (HOC)