DESDE CERO: Como crear un componente en Vue.js

Desde Cero: Como crear un componente en vue.js

Vue.js implementa una forma interesante de agrupar nuestras funcionalidades en los bien llamados componentes” para de esta manera poder reutilizarlos en cualquier parte de nuestra aplicación.

Dicho de otra forma, el sistema de componentes en Vue.js es una abstracción que nos permite construir aplicaciones de gran escala compuestas por componentes pequeños, autocontenidos y, normalmente, reutilizables. 
 
Pensando un poco en esto último podemos decir que la interfaz gráfica de nuestra aplicación puede estar representada de manera abstracta como un árbol de componentes.
 
Es decir, nuestra interfaz gráfica puede, o se recomienda, segmentarla en un conjunto de componentes, por ejemplo, crear un componente para: formulario de login, sidebar colapsable, mapa con marcadores dinámicos, entre otros.
 
En Vue.js, un componente esencialmente se crea como instancia de la librería principal de Vue la cual incorpora opciones predefinidas.
 
Para definir un componente basta con escribir lo siguiente:
Con esto podríamos fácilmente incluir nuestro componente en el HTML, por ejemplo:
Para entender mejor como trabajar con los componentes, como funcionan y donde va cada cosa, y sobre todo, como hacerlos dinámicos, vamos a realizar un pequeño ejemplo desde cero. Pero antes procedo a explicar como se define y las propiedades que contiene.
 
Para definir un componente basta con escribir lo siguiente:

Seguido a esto debemos indicar sobre que elemento se va a  

Lo primero que debemos hacer es incluir Vue.js en nuestro documento index.html:

index.html

Luego inicializamos nuestra aplicación, para ello creamos un elemento cuyo id será app” y luego instanciamos la clase Vue indicándole mediante el parámetro el” en donde se va a ejecutar nuestra aplicación:

Como pueden ver, el parametro el” indica que nuestra aplicación se va a ejecutar en un elemento cuyo id sea app“.
 
Ya con esto tenemos todo listo para empezar a crear e implementar nuestro componente. Para ello debemos definirlo de la siguiente manera:
Este componente sencillamente va a simular el despliegue de una lista de correos de los usuarios suscritos al newsletter.
 
Lo siguiente a que haremos es definir el template que va a tener nuestro componente y una propiedad que se encargará de recibir los datos para su despliegue. Quedaría entonces de la siguiente manera:

Otro de los parámetros que pueden definirse es data()” el cual es una función que permite devolver estructura de datos para ser usados como variables dentro de nuestro componente. 

Para este ejemplo, vamos a utilizar este parámetro para simular ciertos registros de usuarios registrados en el newsletter:
Y ya con esto podemos utilizar nuestro nuevo componente newsletter-users” en nuestra aplicación, para ello hacemos lo siguiente:
Como podrán notar vemos varias cosas importantes que para el ejemplo tuve que utilizar pero que no lo he explicado anteriormente:
 
  • v-for: permite iterar arreglos de contenido y repetir elementos según la dimención de nuestro arreglo.
  • v-bind: Se encarga de asignarle contenido en este caso a nuestra propiedad email que reside dentro de nuestro componente, con uno de los items de nuestro arreglo registeredUsers.
Quedando entonces nuestro código completo de la siguiente forma:
A continuación, veamos como funciona:

Si te gustó este post, ayúdame a que pueda servirle a muchas más personas, compartiendo mis contenidos en tus redes sociales.
 
Espero que este post haya sido de gran ayuda para ti, y como siempre, cualquier inquietud o duda que tengas, puedes contactarme por cualquiera de las vías disponibles, o dejando tus comentarios al final de este post. También puedes sugerir que temas o post te gustaría leer a futuro.