4. v-bind y v-on. Comunicación entre componentes.

Vue.js 4. v-bind y v-on. Comunicación entre componentes.

Francisco Javier Martínez / 10 marzo, 2017

FacebookTwittergoogle_plusEmailLinkedIn

En el episodio anterior vimos cómo crear un componente local dentro de un archivo .vueusando Vue Cli, herramienta que nos permite trabajar de forma muy rápida en aplicaciones Vue.

Como recordarás, los archivos .vue nos dan la posibilidad de encapsular individualmente nuestros componentes, dejando nuestro código muy ordenado. Dentro de un archivo siempre habrá un único componente, dividido en tres secciones: script, template y style.

Antes de pasar a la creación del componente es muy necesario explicar unos cuantos conceptos nuevos que nos permitirán comunicarnos entre componentes.

v-bind

Con esta directiva podremos vincular un atributo html (o prop de un componente, como veremos enseguida) a un valor que tenemos en nuestro modelo. Recibe como parámetro el atributo. De esta manera podríamos, por ejemplo, asignar el atributo disabledcondicionalmente a un botón.

<button v-bind:disabled="my_variable">Enviar</button>

Incluso podemos usar un atajo y eliminar completamente v-bind, dejando únicamente :(A partir de ahora usaremos esta forma)

<button :disabled="my_variable">Enviar</button>

v-on

Con esta directiva podremos escuchar un evento, ya sea nativo, o creado por nosotros. Por ejemplo podríamos estar atentos a que se haga click en un botón para lanzar una acción en nuestro modelo.

<button v-on:click="my_method">Enviar</button>

Al igual que la anterior directiva, podemos eliminarv-on:y sustituirlo por @(A partir de ahora usaremos esta forma)

<button @click="my_method">Enviar</button>

A medida que vayas familiarizandote con la sintasix de Vue, te resultará muy legible el uso de estos atajos.

props

Las props son parecidas a las propiedades que declaramos en el datapero con la particularidad de que su valor es pasado desde el exterior. Se pueden declarar en formato de array o como un objeto (usado para validaciones y defaults, que explicaremos más adelante).

export default {
      props: [
        'name'
      ]
    }

Podemos pasar la prop nameal componente en el momento de su declaración

<user name="John Doe"></user>

O como hemos explicado en la directiva v-bind, atandolo a una variable de nuestro modelo

<user :name="user.name"></user>

$emit

Mientras que las props nos sirven para pasar información del exterior al componente, con $emitpodemos crear un evento personalizado el cual escucharemos con v-on en nuestro componente padre. También podemos pasar parametros.

//En nuestro componente hijo
this.$emit('buttonPressed')
this.$emit('buttonPressed', name)

//En nuestro componente padre
<user @buttonPressed="sayHello"></user>

Seguidamente veremos todo esto en acción.

Creación de un componente «hijo»

Ahora, vamos a crear un componente que se va a encargar de almacenar usuarios. Los usuarios serán creados desde el componente «padre» (o App.vue en este caso) pasando, a través de una prop, el nombre del usuario. Así mismo, desde el componente de usuarios, enviaremos un evento al pulsar un botón para que el componente padre envíe un saludo al usuario.

Para ello crearemos un archivo dentro de la carpeta src de nuestro proyecto al cual llamaremos User.vue

Vamos a crear una función que se dedique a emitir un evento al padre y le pase como parametro el nombre del usuario. En Vue, las funciones se declaran en methods

<script>
    export default {
      props: [
        'name'
      ],
      methods: {
        sayHello() {
          this.$emit('buttonPressed', this.name)
        }
      }
    }
</script>

<template>
    <div>
        <h3>{{ name }}</h3>
        <button @click="sayHello">Saludar</button>
    </div>
</template>

Importando y declarando el componente

Para poder hacer uso del componente que acabamos de crear en nuestro componente App, lo primero que tenemos que hacer es importarlo. Como estamos usando Vue-CLI, podremos usar la sintasix ES6 para hacerlo facilmente

import User from './User.vue'

Ahora tenemos que decirle a nuestro componente App que queremos usarlo. Para ello lo declararemos en la propiedad components de nuestro modelo

components: {
      User
    },

Desde este momento podremos montar tantos componentes en nuestro template como queramos. En nuestro caso, vamos a declarar un array users en nuestro data y a través de un input añadiremos nuevos usuarios. Crearemos un componente users por cada usuario usando v-for

<template>
  <div id="app">
    <p class="title">Hola {{ name }}</p>
    <hr>
    <input v-model="userName">
    <button @click="addUser">Añadir</button>
    <hr>
    <user
            v-for="user in users"
            :name="user"
            @buttonPressed="sayHello"
    ></user>
  </div>
</template>

<script>
  import User from './User.vue'

  export default {
    name: 'app',
    components: {
      User
    },
    data () {
      return {
        name: 'Laraveles',
        userName: '',
        users: []
      }
    },
    methods: {
      addUser() {
        this.users.push(this.userName)
        this.userName = ''
      },
      sayHello(name) {
        this.name = name
      }
    }
  }
</script>

<style>
.title {
  text-align: center;
  color: red;
}
</style>

Te animo a que te atrevas a cambiar el código y vayas al navegador y ver qué has conseguido.

Si tienes alguna duda o sugerencias acerca de este articulo, puedes hacerla a través de los comentarios o unirte al Slack de Laraveles en el nuevo canal #Front podrás preguntar más acerca de las maravillas que nos trae Vue JS. Solo tienes que probar.

SHARE

Oscar perez

Arquitecto especialista en gestion de proyectos si necesitas desarrollar algun proyecto en Bogota contactame en el 3006825874 o visita mi pagina en www.arquitectobogota.tk

• 
• 
• 
• 
•