Hora de jugar (y conocer) Vue.js

Photo by Jared Sluyter on Unsplash

En la última Beerjs Santiago presente como podemos empezar a usar Vue.js sin tener Vue instalado ni un CLI como vue-cli en nuestra maquina.

Para eso vamos a ir armando la app de a poco con Codesandbox.io que es una webapp que te permite levantar un entorno de desarrollo con la opción de elegir un scaffold con Vue. De ahi en adelante tienes un editor online, una ventana con el browser al lado, terminal para recibir logs de la app, la opción para poder agregar cualquier paquete de npm, incluso un botón para publicar la app, entre varias cosas más.

Una de las opciones de Codesandbox es poder hacer un fork del proyecto, entonces la idea es que vamos a ir explicando una cosa sobre Vue a la vez, haciendo forks donde vamos a seguir avanzando en conocer Vue, cosa de ver por separado cada paso y revisarlo de forma aislada. Cada fork va ir construyendo sobre el anterior agregando más funcionalidades del framework.

Para seguir has click en el icono de la hamburguesa a la izquierda para abrir toda la estructura de la app. También puedes abrir una ventana aparte haciendo click a la derecha en ‘Edit on codeSandbox’

Primer Fork — La instancia de Vue, componentes padre / hijo y props

Lo primero es agregar dos componentes en la carpeta components. Uno se va a llamar Parent y el otro Child. Cada componente en Vue termina con la extensión .vue y su estructura es la siguiente:

<template></template>
<script>
export default {
    name: "nombre-componente",
    data() {
        return {
            propiedadReactiva: 'valor',
        };
    }
};
</script>
<style></style>

Este archivo reune el markup, los estilos y la lógica del componente.

Registro Componentes

Ahora que tenemos los componentes creados necesitamos registarlos. El proceso de registro global de un componente permite que la instancia raiz de Vue que creamos reconosca nuestros componentes. De esta forma cualquier componente puede usarlos.

En main.js antes de donde se inicializa la instancia de Vue connew Vue registramos los componentes. El metodo component recibe como primer argumento el nombre del componente y luego el componente que importamos al principio del script como segundo.

Vue.component("Parent", Parent);
Vue.component("Child", Child);

Componentes con props

Dentro del template de Parent vamos a insertar nuestro componente Child y le vamos a pasar un prop que es una propiedad que va a pasarse del padre al hijo.

Las propiedades o props de un componente padre a un hijo se pasan con el atributo props dandole un valor que vamos a sacar del objeto que retorna data() en nuestro tag<script>

Vamos a pasar la propiedad name que tiene el valor Luke al hijo. <Child props="name">

Por el lado del hijo para poder recibir ese prop tenemos que agregar a nuestro script una propiedad props. Un objeto que tiene como llave el nombre del prop y como valor el tipo del valor que en este caso es un string.

export default {
    ...
    props: {
        name: String
    },

De esta forma tenemos dos componentes distintos, donde uno puede ocuparse dentro de otro y donde ese hijo puede tomar el estado de alguna propiedad del padre y pasarselo a si mismo.

Data reactiva de un componente a otro

En Vue en el metodo data() guardamos toda el estado del componente. Cualquier cambio en la data del padre que se pasa como prop al hijo va a ser reactiva y se va a cambiar en el hijo sin reloads.

Jugemos con el sandbox para probar la reactividad! En nuestro sandbox si cambiamos la propiedad msg del padre vamos a ver que cambia instantaneamente en el hijo.

…y bueno este fue el primer Fork!

En el próximo post/fork de la serie vamos a ocupar métodos y directivas para gatillar funcionalidades en la app.

Si te gusto este post, has tap/click en el boton👏 un par de veces, así el post puede ser visto por más personas en Medium. Grazie Mille!