Componenti dinamici con le funzioni render
Cambio dei componenti in base al tipo, risoluzione dei componenti, mantenimento degli slot nelle funzioni render.
Componenti dinamici con le funzioni render è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.
Componenti dinamici nelle funzioni di rendering
I template usano <component :is="..."> per sostituire i componenti a runtime. In una funzione di rendering si ottiene lo stesso risultato con gli helper di risoluzione e h.
resolveComponent
resolveComponent cerca un componente registrato globalmente o localmente in base al nome con cui è stato registrato e lo restituisce per l'uso con h.
import { h, resolveComponent } from "vue";
export default {
render() {
const Btn = resolveComponent("MyButton");
return h(Btn, null, () => "Click");
}
};resolveDynamicComponent
Quando il target può essere un nome registrato, un tag HTML o un oggetto componente, usare resolveDynamicComponent. Gestisce tutti e tre i casi.
import { h, resolveDynamicComponent } from "vue";
h(resolveDynamicComponent(props.type));Determinare il tipo tramite le props
Passare il nome del componente tramite una prop e risolverlo a ogni rendering. È l'equivalente, nelle funzioni di rendering, di :is.
export default {
props: { type: String },
render() {
const Comp = resolveDynamicComponent(this.type);
return h(Comp, { msg: "hi" });
}
};Inoltrare le props
Distribuire gli attrs ricevuti sul componente risolto, così il componente dinamico riceve tutto ciò che è stato fornito dal componente padre.
setup(props, { attrs }) {
return () => h(
resolveDynamicComponent(props.type),
{ ...attrs }
);
}Inoltrare gli slot
Gli slot raggiungono un componente figlio tramite il terzo argomento di h. Inoltrare direttamente l'oggetto slots del componente padre, così il componente dinamico può renderizzarli.
setup(props, { slots }) {
return () => h(
resolveDynamicComponent(props.type),
null,
slots
);
}Un renderer riutilizzabile
Combinare l'inoltro di attrs e slot produce un wrapper sottile che renderizza qualsiasi componente per nome, trasferendo tutti i dati.
setup(props, { attrs, slots }) {
return () => h(
resolveDynamicComponent(props.is),
attrs,
slots
);
}Renderer dinamici per le colonne
Le tabelle di dati consentono spesso di specificare un componente renderer per ogni colonna. Memorizzare il nome del componente per ciascuna colonna e risolverlo per ogni cella.
const columns = [
{ field: "name", renderer: "TextCell" },
{ field: "price", renderer: "MoneyCell" }
];Renderizzare dinamicamente le celle
Per ogni colonna, risolvere il relativo renderer e passare il valore della cella come prop. Un solo ciclo gestisce tipi di celle eterogenei.
render() {
return h("tr", null,
columns.map((col) =>
h("td", null, [
h(resolveDynamicComponent(col.renderer), {
value: this.row[col.field]
})
])
)
);
}Ricorrere a un tag
Se resolveDynamicComponent riceve un nome non registrato, lo considera la stringa di un elemento nativo, quindi "div" renderizza in modo sicuro un vero div.
h(resolveDynamicComponent("div"), { class: "box" }, "fallback");Perché usare qui le funzioni di rendering
Le funzioni di rendering sono particolarmente utili quando la struttura viene calcolata, ad esempio con un numero variabile di figli, tipi di componente diversi per ogni elemento o una logica che richiederebbe molte condizioni annidate nei template.
Verifica rapida
Quale helper risolve in modo sicuro un target che potrebbe essere un nome di componente oppure un tag HTML nativo?
Riepilogo
Usare resolveComponent per i nomi registrati e resolveDynamicComponent quando il target potrebbe essere anche un tag HTML o un oggetto componente. Inoltrare attrs come props e passare l'oggetto slots come terzo argomento di h. Questo schema è alla base dei renderer dinamici per le colonne delle tabelle e dei wrapper flessibili.
Domande Frequenti
La lezione «Componenti dinamici con le funzioni render» è gratuita?
Sì — il testo completo di «Componenti dinamici con le funzioni render» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.
Cosa imparerò in «Componenti dinamici con le funzioni render»?
Cambio dei componenti in base al tipo, risoluzione dei componenti, mantenimento degli slot nelle funzioni render. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Vue Academy?
Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Componenti dinamici con le funzioni render»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Vue Academy?
Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Approfondimento sulla funzione h()
- JSX in Vue 3 con Vite
- Componenti dinamici con le funzioni render
- Pattern dei componenti higher-order (HOC)