Vue nos permite crear componentes para hacer nuestra aplicación más desacoplada y reutilizable, en este post quiero explicar un poco sobre como crear componentes en Vue, cómo compartir data entre ellos y cómo registrarlo de forma local o global.

Porque usar componentes ?

Si tenemos una funcionalidad que quisiéramos reutilizar en otras aplicaciones o instancias, Vue nos permite crear componentes que pueden ser utilizados en la misma aplicación o en diversas, de una forma fácil y rápida.

Mi ejemplo se basa en la funcionalidad contador, que la sacaremos de estar incrustada en la aplicación a ser un componente.

Creando un Vue.Component ?

Un Vue.Component es igual que una  instancia de Vue pero con más opciones, para crear un componente utilizamos Vue.component y como primer argumento especificamos el tag del componente, ejemplo ‘my-counter’, y como segundo argumento un json object muy similar a una instancia de Vue.

Para este ejemplo voy a copiar la funcionalidad del counter de nuestra app1, pero con un cambio, como sabemos, component extiende instancia de Vue, la propiedad data del component va a interferir con nuestra instancia de data en Vue,  por eso convertimos el data del componente a una función evitar conflictos.

Ahora con agregar el nombre del tag en nuestra aplicación debe visualizar el contador, y podemos en las dos  instancias de Vue utilizar el componente <my-counter></my-counter>

Compartiendo data entre componentes

Cada instancia de components tienen el control sobre su scope de data, pero si quisiéramos compartir data entre componentes ?

Para este caso entonces podemos crear un objeto data y asignarlo a nuestro componente, Vue detectara el cambio en cada instancia de el componente y reflejara el cambio aunque sean dos aplicaciones diferentes.

Registrando componentes

Vuejs nos permite registrar los componentes de dos formas locales y globales,  en el ejemplo anterior el componente lo registramos de forma global,  eso quiere decir que cualquier app que llame el tag puede utilizar el componente, solo llamando el nombre .

Pero si quisiera llamar el componente con otro tag en mi aplicación o que mi componente solo se muestre en las apps que lo tenga registrado, entonces necesitamos un registrarlo de forma local.

Para registrar un componente de forma local,  tenemos que guardar nuestro componente en una variable y no utilizar Vue.component,  sino lo definimos como un objeto json y en nuestra aplicación utilizamos el atributo ‘components’ que es donde especificamos el tag con el cual queremos usar el componente en nuestra aplicación y como valor la variable donde hemos almacenado el componente, he aquí un ejemplo.

Pasando información a los componentes

Cada instancia de un componente en Vuejs tiene su propio ámbito aislado. Esto significa que no puede  hacer referencia directa a los datos de los padres, pero podemos  transmitir información a los componentes secundarios utilizando Props.

Un prop es un atributo personalizado para pasar información de la app al componente o de un componente padre a componente hijo, para lograr esto debemos declarar implícitamente las props que espera recibir en nuestro componente.

En este ejemplo tengo una app my-gallery que mostrara un listado de imágenes de “personas famosas de react”, para mostrar la imagen creare un componente gal-image el cual tiene una prop que se llama imageUrl, la cual permitirá que la app my-gallery le envíe la imagen a visualizar.

Utilizaré directiva v-for para iterar en el array de imágenes, como los atributos son sensibles a mayúscula y minúscula pasar el parámetro tenemos que usar kebab-case, en este caso mi propiedad se llama imageUrl pero la asigno como image-url.

Para enviar la url de la imagen a el componente no puedo usar  {{miobjeto.mipropiead}} , sino tenemos que hacer un bind a la propiedad usando v-bind o :image-url.

He aqui un ejemplo.

See the Pen vue example with components by Dany Paredes (@danywalls) on CodePen.

Happy Vue!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *