Componentes dinámicos con funciones render
Cambio de componentes por tipo, resolución de componentes y conservación de slots en funciones render
Componentes dinámicos con funciones render es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
Componentes dinámicos en funciones de renderizado
Las plantillas usan <component :is="..."> para intercambiar componentes en tiempo de ejecución. En una función de renderizado puede conseguir lo mismo con los helpers de resolución y h.
resolveComponent
resolveComponent busca un componente registrado de forma global o local por su nombre registrado y lo devuelve para usarlo con h.
import { h, resolveComponent } from "vue";
export default {
render() {
const Btn = resolveComponent("MyButton");
return h(Btn, null, () => "Click");
}
};resolveDynamicComponent
Cuando el objetivo puede ser un nombre registrado, una etiqueta HTML o un objeto de componente, use resolveDynamicComponent. Esta función gestiona los tres casos.
import { h, resolveDynamicComponent } from "vue";
h(resolveDynamicComponent(props.type));Determinar el type a partir de las props
Pase el nombre del componente mediante una prop y resuélvalo en cada renderizado. Este es el equivalente de :is en una función de renderizado.
export default {
props: { type: String },
render() {
const Comp = resolveDynamicComponent(this.type);
return h(Comp, { msg: "hi" });
}
};Reenviar props
Distribuya los attrs recibidos sobre el componente resuelto para que el componente secundario dinámico reciba todo lo que recibió el componente principal.
setup(props, { attrs }) {
return () => h(
resolveDynamicComponent(props.type),
{ ...attrs }
);
}Reenviar slots
Los slots llegan a un componente secundario mediante el tercer argumento de h. Reenvíe directamente el objeto de slots del componente principal para que el componente dinámico los renderice.
setup(props, { slots }) {
return () => h(
resolveDynamicComponent(props.type),
null,
slots
);
}Un renderizador reutilizable
Combinar el reenvío de attrs y slots produce un wrapper ligero que renderiza cualquier componente por su nombre y transmite todo lo demás.
setup(props, { attrs, slots }) {
return () => h(
resolveDynamicComponent(props.is),
attrs,
slots
);
}Renderizadores dinámicos de columnas
Las tablas de datos suelen permitir que cada columna especifique su propio componente renderizador. Guarde el nombre del componente en cada columna y resuélvalo para cada celda.
const columns = [
{ field: "name", renderer: "TextCell" },
{ field: "price", renderer: "MoneyCell" }
];Renderizar celdas dinámicamente
Para cada columna, resuelva su renderizador y pase el valor de la celda como prop. Un solo bucle gestiona tipos de celda heterogéneos.
render() {
return h("tr", null,
columns.map((col) =>
h("td", null, [
h(resolveDynamicComponent(col.renderer), {
value: this.row[col.field]
})
])
)
);
}Usar una etiqueta alternativa
Si resolveDynamicComponent recibe un nombre no registrado, lo trata como una cadena de elemento nativo, por lo que "div" renderiza un div real de forma segura.
h(resolveDynamicComponent("div"), { class: "box" }, "fallback");Por qué usar funciones de renderizado aquí
Las funciones de renderizado son especialmente útiles cuando la estructura se calcula dinámicamente: cantidades variables de elementos secundarios, tipos de componente distintos para cada elemento o lógica que requeriría muchas condiciones anidadas en la plantilla.
Comprobación rápida
¿Qué helper resuelve de forma segura un objetivo que podría ser un nombre de componente o una etiqueta HTML nativa?
Resumen
Use resolveComponent para nombres registrados y resolveDynamicComponent cuando el objetivo también pueda ser una etiqueta HTML o un objeto de componente. Reenvíe attrs como props y pase el objeto slots como tercer argumento de h. Este patrón permite crear renderizadores dinámicos de columnas de tablas y wrappers flexibles.
Preguntas frecuentes
¿La lección «Componentes dinámicos con funciones render» es gratis?
Sí — el texto completo de «Componentes dinámicos con funciones render» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Componentes dinámicos con funciones render»?
Cambio de componentes por tipo, resolución de componentes y conservación de slots en funciones render Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Componentes dinámicos con funciones render»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Análisis profundo de la función h()
- JSX en Vue 3 con Vite
- Componentes dinámicos con funciones render
- Patrón de componentes de orden superior (HOC)