Dynamiske komponenter med render-funksjoner
Bytt komponenter basert på type, forstå komponentoppløsning og behold slots i render-funksjoner.
Dynamiske komponenter med render-funksjoner er en gratis leksjon i Vue Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Vue Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Vue Academy inneholder totalt 4 leksjoner.
Dynamiske komponenter i render-funksjoner
Maler bruker <component :is="..."> for å bytte komponenter under kjøring. I en render-funksjon oppnår De det samme med resolve-hjelpefunksjonene og h.
resolveComponent
resolveComponent slår opp en globalt eller lokalt registrert komponent basert på det registrerte navnet og returnerer den for bruk 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 registrert navn, en HTML-tagg eller et komponentobjekt, bruker De resolveDynamicComponent. Den håndterer alle tre tilfellene.
import { h, resolveDynamicComponent } from "vue";
h(resolveDynamicComponent(props.type));Styre type fra props
Send komponentnavnet gjennom en prop, og løs det opp ved hver rendring. Dette er render-funksjonens tilsvarende løsning for :is.
export default {
props: { type: String },
render() {
const Comp = resolveDynamicComponent(this.type);
return h(Comp, { msg: "hi" });
}
};Videreformidle props
Spre innkommende attributter over den oppløste komponenten, slik at det dynamiske barnet mottar alt som ble sendt til forelderen.
setup(props, { attrs }) {
return () => h(
resolveDynamicComponent(props.type),
{ ...attrs }
);
}Videreformidle slots
Slots når et barn gjennom det tredje argumentet til h. Videreformidle forelderens slots-objekt direkte, slik at den dynamiske komponenten kan rendre dem.
setup(props, { slots }) {
return () => h(
resolveDynamicComponent(props.type),
null,
slots
);
}En gjenbrukbar renderer
Ved å kombinere videreformidling av attributter og slots får De en tynn wrapper som rendrer enhver komponent basert på navn, samtidig som alt sendes videre.
setup(props, { attrs, slots }) {
return () => h(
resolveDynamicComponent(props.is),
attrs,
slots
);
}Dynamiske renderere for kolonner
Datatabeller lar ofte hver kolonne angi sin egen renderer-komponent. Lagre komponentnavnet for hver kolonne, og løs det opp for hver celle.
const columns = [
{ field: "name", renderer: "TextCell" },
{ field: "price", renderer: "MoneyCell" }
];Rendre celler dynamisk
For hver kolonne løser De opp rendereren og sender celleverdien som en prop. Én løkke styrer heterogene celletyper.
render() {
return h("tr", null,
columns.map((col) =>
h("td", null, [
h(resolveDynamicComponent(col.renderer), {
value: this.row[col.field]
})
])
)
);
}Falle tilbake til en tagg
Hvis resolveDynamicComponent mottar et uregistrert navn, behandler den det som en streng for et nativt element, slik at "div" rendrer en ekte div på en trygg måte.
h(resolveDynamicComponent("div"), { class: "box" }, "fallback");Hvorfor bruke render-funksjoner her
Render-funksjoner er nyttige når strukturen beregnes, for eksempel ved et variabelt antall barn, komponenttyper per element eller logikk som ville krevd mange nestede betingelser i en mal.
Hurtigsjekk
Hvilken hjelpefunksjon løser trygt opp et mål som kan være et komponentnavn ELLER en nativ HTML-tagg?
Oppsummering
Bruk resolveComponent for registrerte navn og resolveDynamicComponent når målet også kan være en HTML-tagg eller et komponentobjekt. Videreformidle attrs som props, og send slots-objektet som det tredje h-argumentet. Dette mønsteret brukes til dynamiske renderere for tabellkolonner og fleksible wrappere.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 42
- Leksjoner
- 156
Ofte stilte spørsmål
Er leksjonen «Dynamiske komponenter med render-funksjoner» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Vue Academy, inkludert «Dynamiske komponenter med render-funksjoner», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Vue Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Dynamiske komponenter med render-funksjoner»?
Bytt komponenter basert på type, forstå komponentoppløsning og behold slots i render-funksjoner. Du øver på Vue Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Vue Academy?
Ingen tidligere erfaring er nødvendig. Vue Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.
Hvor lang tid tar leksjonen «Dynamiske komponenter med render-funksjoner»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Vue Academy-leksjonen?
Ja. Alle Vue Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Grundig gjennomgang av h()-funksjonen
- JSX i Vue 3 med Vite
- Dynamiske komponenter med render-funksjoner
- Mønsteret Higher-Order Components (HOC)