Tutorial 2 – Vue.Js 2: ¿Cómo crear componentes en VueJs?

Una vez que ya te has introducido en Vue.Js y has decidido seguir aprendiendo, en este artículo vamos a realizar un ejemplo práctico de como crear un nuevos componentes y las partes principales que componen un componente en VueJs.

Introducción

Este framework esta dirigido a crear componentes con la finalidad de reutilizar código y no tener funcionalidades similares programadas más de una vez repitiendo código difícilmente mantenible.

Un componente te permiten extender elementos HTML básicos para encapsular código reutilizable. Coloquialmente hablando, los componentes son una composición de HTML a los que el compilador de Vue les añade comportamiento Javascript.

Siguiendo la directriz de reutilizar y encapsular código que marca Vue.Js, este framework nos permite aplicar perfectamente el primer principio de las siglas SOLID (Single Responsibility). Cuando un componente esta encapsulando diferentes lógicas de negocio, el principio de Single Responsibility se está violando y por lo tanto este componente debería de subdividirse en varios componentes.

Código

El código que se muestra a continuación esta creando un componente llamado <message/> y es reutilizado en un bucle de Vue.Js para crear N instancias de este componente proporcionando un mensaje diferente en cada una de las instancias.

El código anterior hace uso de diversas funcionalidades descritas a continuación:

1. Vue.component(‘message’) crea un componente nuevo de Vue y lo registra en el compilador de Vue para poder ser utilizado. El nombre del componente registrado es message.
2. La propiedad template del componente sirve para asociar código HTML al componente nuevo. En este ejemplo se trata de un tag HTML comúnmente conocido como es <li>.
3. En el template del componente aparece el tag HTML <slot></slot>. Esta funcionalidad permite remplazar el tag <slot></slot> por el código HTML definido dentro de la instancia del componente. 
4. El atributo v-for sirve para generar un bucle y repetir tags HTML. Este atributo obligatoriamente necesita el uso del atributo :key=»index», de esta forma Vue sabe identificar inequívocamente cada uno de los tags HTML que ha generado en el bucle.
5. El código <message>Message {{item}}</message>, es la forma de utilizar el componente que hemos creado en este ejemplo. Es tan sencillo como crear un tag <message>. Además, como se puede observar este componente soporta poder añadir código HTML dentro del componente. El código Message {{item}} es sustituido por el tag <slot></slot> nombrado en el punto 3. Es por ello que cuando ejecutamos el código aparece una lista con los mensajes: Message 1, Message 2, etc.

Conclusión

La creación de componentes encapsulando funcionalidades reutilizables es uno de los puntos más fuertes de Vue.Js. Por lo tanto, es necesario comprender exactamente cómo se realizan componentes y cómo subdividir un componente que ha ido evolucionando y ahora mismo realiza más tareas para las que fue concebido.