Componentes para Vue.js

La base de una aplicación en Vue.js son los componentes. Sin embargo, cuando comenzamos a crear nuestros propios componentes, combinarlos y a usar diferentes componentes dentro de otros nuestra aplicación puede llegar a crecer y terminemos teniendo muchos componentes sin un orden o estructura alguna. En este tutorial aprenderemos algunas técnicas para estructurar y organizar los componentes de nuestra aplicación.

Estructura básica

Al comenzar a trabajar con Vue.js es probable que tengamos una estructura similar a la siguiente:

Normalmente lo que solemos hacer es almacenar nuestros componentes en el directorio components. Al comenzar a trabajar con Vue.js es probable que tengamos una estructura similar a la siguiente:

Hasta aquí todo bien: tenemos un componente principal App.vue y otros tres componentes que conforman una página de servicios. Pero, ¿Qué sucede cuando inevitablemente tenemos que añadir más componentes o secciones a nuestra aplicación? Probablemente tengamos algo similar a esto:

Como puedes observar, llega un punto en que nuestro directorio components crece hasta convertirse en una lista infinita y desorganizada de componentes.

La guía de estilo de Vue.js nos sugiere no utilizar una sola palabra para el nombre del componente.

Categorizando componentes

Dentro del directorio components de ejemplo puedes observar que tenemos tres tipo de componentes que pertenecen a una misma categoría: listas (List), páginas (Page) y menú (Menu). Por lo tanto, podríamos crear la siguiente estructura partiendo de la categoría de cada componente:

Sin embargo, observa como tenemos dos componentes adicionales que pertenecen a services: ServicesMenu y ServicesSidebar. Por lo que es momento de preguntarnos, ¿tendría más sentido si tuviéramos un directorio dedicado solo para componentes Services? Podríamos crear un directorio llamado ServicesPage dentro del directorio pages:

¿Mucho mejor, no? Observa que también hemos agregado un directorio CheckoutPage y hemos renombrado los componentes ServicesPage.vue y CheckoutPage.vue a Index.vue.

Componentes comunes

En nuestro directorio componentes tenemos tres otros componentes: AddToCartButton.vue, SiteHeader.vue y SiteFooter.vue. Veamos a que categoría podrían pertenecer:

  • AddToCartButton.vue es un botón que agrega los productos a una lista.
  • SiteHeader.vue es el encabezado de nuestro sitio.
  • SiteFooter.vue es el footer de nuestro sitio.

Podríamos decir que AddToCartButton pertenece a los formularios de nuestra aplicación y SiteHeader y SiteFooter pertenecen al layout, por lo tanto, podríamos actualizar la estructura de la siguiente manera:

Como puedes ver, organizar nuestros componentes y poner algo de orden en nuestros directorios no es nada complicado. Un último cambio que podríamos agregar es reusar los componentes de listas, ya que como puedes observar tenemos dos componentes similares CheckoutList y ServicesList. Podríamos crear un componente List que pertenezca a una categoría común y sea reusado por otros componentes:

Observa como ahora tenemos un componente común llamado AppList que reemplaza a los dos componentes anteriores que se repetían.

Si tienes alguna duda puedes dejarla en los comentarios y si te ha gustado este tutorial no olvides compartirlo.

Puedes aprender más sobre Vue.js en nuestro Curso de Vue 2.

Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.