Componentes dinámicos con Vue.js

Curso de Vue.js: Componentes y Composition API

Contenido del curso

Introducción

Built-in Components

Componentes personalizados

Composition API

Cierre del curso

23
Qué aprendiste en el curso de Vue.js 3
01:29 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:009:00

Componentes dinámicos con Vue.js

Curso de Vue.js: Componentes y Composition API

Clase 4 de 23

Clase 4 / 23

Recursos

Si ya conoces la estructura básica de un proyecto en Vue CLI, el siguiente paso es entender cómo trabajar con componentes dinámicos en Vue.js, esa pieza que te permite cambiar qué se renderiza en tiempo de ejecución usando una simple variable. Esto es clave para construir interfaces reactivas que respondan al usuario, al servidor o a cualquier estado de tu aplicación.

¿Cómo se importan y registran componentes en Vue.js?

Dentro de un proyecto creado con Vue CLI, cada componente vive en su propio archivo .vue, lo que se conoce como Single File Component. Esto te da aislamiento y orden.

En el archivo App.vue, que actúa como componente raíz, importas otros componentes como cualquier dependencia moderna de JavaScript, aprovechando la sintaxis de ECMAScript. Ya no necesitas Vue.component como en versiones anteriores.

El flujo es directo:

Importas el componente desde la carpeta components con su nombre completo.
Lo registras dentro de la propiedad components del objeto exportado.
Lo usas en el template con el nombre que le hayas asignado.

¿Puedo renombrar un componente al registrarlo? Sí. La propiedad components es un objeto JSON común. Puedes escribir Hello: HelloWorld y usar <Hello /> en el template, útil para evitar ambigüedades de nombres.

¿Por qué usar el atributo scoped en los estilos?

Aquí viene un detalle importante: el bloque <style> de un Single File Component es global por defecto. Si defines reglas para todos los div o p, esos estilos se aplican a todo el proyecto.

La solución es agregar el atributo scoped al tag <style>. Con eso, el CSS solo afecta a los elementos del template de ese componente. Así puedes reutilizar nombres de clase entre componentes sin chocar entre sí.

¿Qué es un componente dinámico en Vue.js y para qué sirve?

Imagina que tienes dos componentes y quieres mostrar uno u otro dependiendo de una acción del usuario o de un dato que viene del backend. No quieres escribir condicionales por cada caso; quieres que una variable decida qué se renderiza.

Vue.js resuelve esto con un componente genérico llamado <component>, que se mimetiza con cualquier componente que tú le indiques mediante el atributo especial is.

¿Qué es el atributo is en Vue.js? Es el atributo que recibe el nombre del componente que quieres renderizar dentro de <component>. Se usa con v-bind:is o su forma corta :is, y acepta una cadena de texto reactiva.

¿Cómo se implementa un componente dinámico paso a paso?

El proceso es sencillo y mantiene toda la reactividad de Vue.js:

Importa y registra los componentes que quieras usar dentro de components.
En el template, reemplaza el tag fijo por <component :is="componente" />.
Define una variable en data(), por ejemplo componente: 'Hello'.
Asegúrate de que el valor de esa variable coincida con el nombre registrado en components.

El nombre que pasas a is no es el del import, sino la key con la que registraste el componente. Si lo registraste como Hello, entonces componente debe valer 'Hello'.

Una vez levantado el servidor de desarrollo con npm run serve, verás que el render funciona igual que si hubieras escrito el tag directamente, pero ahora controlado por una variable reactiva.

¿Qué limitaciones y ventajas tienen los componentes dinámicos?

El componente genérico <component> solo funciona con componentes que ya estén cargados y registrados en el momento de invocarlos. Si intentas usar uno que no importaste, Vue.js te lanzará un error.

Más allá de esa restricción, el comportamiento es idéntico al de cualquier componente normal:

Puedes pasarle props usando v-bind o la sintaxis corta :.
Puedes escuchar eventos con v-on o el arroba @.
La variable que controla is puede venir del backend, del usuario o de cualquier estado reactivo.

Eso lo convierte en una herramienta poderosa para construir interfaces tipo tabs, wizards, dashboards configurables o cualquier vista que cambie según contexto.

Conceptos clave que aparecen en la clase

Estos son los términos técnicos que vale la pena tener claros para dominar el tema:

Single File Component: archivo .vue que agrupa template, script y style de un componente en un solo lugar [0:45].
Registro de componentes: declaración dentro de la propiedad components para que Vue.js reconozca qué tags puede usar el template [1:30].
Atributo scoped: modificador del bloque <style> que limita el CSS al componente actual y evita fugas globales [3:05].
Componente dinámico <component>: tag genérico que renderiza el componente indicado por is [4:35].
Atributo is con v-bind: enlace reactivo que define en tiempo de ejecución qué componente se dibuja [4:55].
Función data(): método donde declaras las variables reactivas, como la que controla qué componente mostrar [5:30].
Comando npm run serve: arranca el servidor de desarrollo para ver los cambios en el navegador [6:15].