Dynamiske komponenter med render-funktioner
Skift af komponenter efter type, komponentopløsning og bevarelse af slots i render-funktioner
Dynamiske komponenter med render-funktioner er en gratis Vue Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Vue Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Vue Academy-kurset indeholder 4 lektioner i alt.
Dynamiske komponenter i gengivelsesfunktioner
Skabeloner bruger <component :is="..."> til at udskifte komponenter under kørsel. I en gengivelsesfunktion opnår du det samme med resolve-hjælpefunktionerne og h.
resolveComponent
resolveComponent slår en globalt eller lokalt registreret komponent op ud fra dens registrerede navn og returnerer den, så den kan bruges med h.
import { h, resolveComponent } from "vue";
export default {
render() {
const Btn = resolveComponent("MyButton");
return h(Btn, null, () => "Click");
}
};resolveDynamicComponent
Når målet kan være et registreret navn, et HTML-tag eller et komponentobjekt, skal du bruge resolveDynamicComponent. Den håndterer alle tre tilfælde.
import { h, resolveDynamicComponent } from "vue";
h(resolveDynamicComponent(props.type));Styring af typen fra props
Videregiv komponentens navn gennem en prop, og slå komponenten op ved hver gengivelse. Det svarer til :is i en gengivelsesfunktion.
export default {
props: { type: String },
render() {
const Comp = resolveDynamicComponent(this.type);
return h(Comp, { msg: "hi" });
}
};Videregivelse af props
Spred de indkommende attrs ud på den opløste komponent, så det dynamiske underordnede element modtager alt det, som forælderen fik.
setup(props, { attrs }) {
return () => h(
resolveDynamicComponent(props.type),
{ ...attrs }
);
}Videregivelse af slots
Slots når et underordnet element gennem det tredje argument til h. Videregiv forælderens slots-objekt direkte, så den dynamiske komponent gengiver dem.
setup(props, { slots }) {
return () => h(
resolveDynamicComponent(props.type),
null,
slots
);
}En genanvendelig gengiver
Når du kombinerer videregivelse af attrs og slots, får du en tynd omsluttende komponent, der gengiver enhver komponent ud fra navn, mens alt sendes videre.
setup(props, { attrs, slots }) {
return () => h(
resolveDynamicComponent(props.is),
attrs,
slots
);
}Dynamiske kolonnegengivere
Datatabeller lader ofte hver kolonne angive sin egen gengiverkomponent. Gem komponentnavnet for hver kolonne, og slå det op for hver celle.
const columns = [
{ field: "name", renderer: "TextCell" },
{ field: "price", renderer: "MoneyCell" }
];Dynamisk gengivelse af celler
Slå gengiveren op for hver kolonne, og videregiv celleværdien som en prop. Én løkke styrer forskellige celletyper.
render() {
return h("tr", null,
columns.map((col) =>
h("td", null, [
h(resolveDynamicComponent(col.renderer), {
value: this.row[col.field]
})
])
)
);
}Tilbagefald til et tag
Hvis resolveDynamicComponent modtager et navn, der ikke er registreret, behandler den det som en streng for et indbygget element, så "div" gengiver et rigtigt div-element sikkert.
h(resolveDynamicComponent("div"), { class: "box" }, "fallback");Hvorfor bruge gengivelsesfunktioner her
Gengivelsesfunktioner er særligt nyttige, når strukturen beregnes dynamisk – for eksempel ved et variabelt antal children, komponenttyper pr. element eller logik, der ellers ville kræve mange indlejrede betingelser i skabelonen.
Hurtigt tjek
Hvilken hjælpefunktion løser sikkert et mål, der kan være et komponentnavn eller et indbygget HTML-tag?
Opsummering
Brug resolveComponent til registrerede navne og resolveDynamicComponent, når målet også kan være et HTML-tag eller et komponentobjekt. Videregiv attrs som props, og send slots-objektet som det tredje h-argument. Dette mønster bruges til dynamiske kolonegengivere i tabeller og fleksible omsluttende komponenter.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 42
- Lektioner
- 156
Ofte stillede spørgsmål
Er lektionen “Dynamiske komponenter med render-funktioner” gratis?
Ja — alle 3 lektioner i læringssporet Vue Academy, inklusive “Dynamiske komponenter med render-funktioner”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Vue Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Dynamiske komponenter med render-funktioner”?
Skift af komponenter efter type, komponentopløsning og bevarelse af slots i render-funktioner Du øver dig i Vue Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Vue Academy?
Der kræves ingen tidligere erfaring. Vue Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “Dynamiske komponenter med render-funktioner”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Vue Academy-lektion?
Ja. Alle Vue Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Dybdegående gennemgang af funktionen h()
- JSX i Vue 3 med Vite
- Dynamiske komponenter med render-funktioner
- Higher-Order Components (HOC)-mønsteret