04.md

📦 Components

El sistema de componentes de Vue es la otra parte fundamental del framework. Vue nos permite construir grandes aplicaciones a través de pequeños componentes. Estos componentes pueden ser re-utilizables (o no), pero lo más importante es que cada componente tiene toda la estructura y lógica que necesita para funcionar. Es decir que cada uno tiene su propio código (JS), su propia estructura (HTML) e incluso sus propios estilos (CSS).

Vue.component()

Vamos a crear nuestro primer componente. Para ser más precisos en los ejemplos anteriores ya estábamos creando un componente: que es el componente principal de la aplicación. La diferencia es que ahora vamos a usar el método estático Vue.component() que permite crear componentes para que sean utilizados por otros.

La ventaja es que los componentes que creemos para reutilizar o insertar en otros componentes tienen las mismas características que el componente principal. Es decir que vamos a crearlos usando un objeto vm el cual puede (o no) contener la función data y el objeto methods. En este caso vamos a ver otras propiedades del vm que son útiles a la hora de trabajar con componentes.

1. En un nuevo fiddle creamos una aplicación de Vue con el siguiente HTML

<div id="app">
</div>

1. Luego en nuestro JS, creamos un nuevo componente que tiene como propósito definir el template para renderizar un determinado objeto (que va a recibir por atributo). También creamos nuestro vm e instancia de Vue con una propiedad family que contiene una colección de personas.

Vue.component('family-member', {
  props: ['member'],

  template: `<li>
    <b>{{ member.id }}</b> - {{ member.name }}
  </li>`
})

const vm = {
  el: '#app',
  data () {
    return {
      family: [
        { id: 1, name: 'Ignacio' },
        { id: 2, name: 'Sofia '},
        { id: 3, name: 'Pedro '}
      ]
    }
  }
}

const app = new Vue(vm)

El objeto vm no es necesario explicarlo, vamos a enfocarnos en lo que pasa en Vue.component(). Para empezar es importante entender que este método esta registrando dentro de Vue un nuevo componente llamado family-member. Desde ahora este nuevo elemento va a poder ser utilizado para cualquier otro componente que tengamos (incluyendo el componente principal).

Como vemos, el método recibe 2 parámetros. El primero es un string con el nombre. El segundo es un objeto (View Model) que tiene toda la configuración (métodos, propiedades, etc) que necesita nuestro componente.

Por otro lado dentro del vm de family-member tenemos 2 nuevas propiedades. Una es props, la cual nos permite definir los atributos que puede recibir nuestro componente a la hora de ser utilizado en el HTML. En nuestro caso decimos nuestro componente tiene un atributo member. Las propiedades de props funcionan igual que las de data, la diferencia es que las de props van a pertenecer al componente padre y el hijo solo tiene acceso de lectura a las mismas (no puede modificar su valor).

Por otro lado tenemos la propiedad template que establece el HTML que va a renderizar nuestro componente.

4. Insertamos nuestro componente en el HTML y agregamos las directivas de Vue para que funcione como esperamos.

<div id="app">
  <h1>Familia</h1>
  <ul>
    <family-member v-for="f in family" :member="f" :key="f.id"/>
  </ul>
</div>

El nombre que le pusimos a nuestro componente es el nombre que usamos para declararlo en el HTML. Usamos la directiva v-for para crear un family-member por cada persona que existe en la propiedad family del componente principal.

También usamos la directiva v-bind (con su shortcut :) para enlazar cada persona (cada elemento de family) con la propiedad member del componente hijo (family-member). Luego es el componente hijo quien usa la data de cada persona para generar el HTML correspondiente (basado en el template definido).

👌 Recorda siempre usar el atributo key con v-bind o : cuando usas la directiva v-for.

---

👉 Aclaraciones

En grandes aplicaciones el concepto de componentes es realmente muy útil ya que nos permite dividir la aplicación en componentes mas pequeños y manejables, es muy común que podamos encontrarnos con este tipo de estructuras:

  <div id="app">
    <top-bar></top-bar>
    <container>
      <side-bar></side-bar>
      <content></content>
    </container>
    <bottom-bar></bottom-bar>
  </div>

📝 Solución

⏪ ⏩