Los componentes en Vuejs

Este es el tercer tutorial de la serie Vuejs desde el CDN en el cual aprenderemos a crear un componente solo haciendo uso del CDN. Al finalizar este tutorial podrás crear una web usando componentes y enviando información entre ellos.

Índice

1. Creando un componente
2. Los métodos y datos en un componente
3. Componentes dentro de otros componentes
4. Comunicación entre componentes
5. Tu turno
6. El código

Los componentes son quizás los elementos más importantes de Vuejs ya que a partir de ellos se va construyendo una aplicación. Estos nos permitirán segmentar nuestra web en distintos elementos, son como piezas de lego con los que construiremos nuestra aplicación web.

1. Creando un componente

En Vue podemos crear componentes dentro de un JavaScript usando el método component(), donde tenemos que enviar como primer parámetro el nombre del componente y como segundo parámetro el objeto que contendrá las propiedades de nuestro componente. El siguiente ejemplo crea el componente saludo.

Vue.component("saludo", {
  template: "<h2>Hola AndyGeek</h2>",
});

Importante!!

Dentro de las propiedades del componente existe la propiedad template que es donde enviamos la estructura HTML de nuestro componente, pero todo dentro de una única etiqueta div.

Para poder utilizar nuestro componente dentro del HTML general solo basta con colocar el nombre del componente como si de etiquetas HTML se tratasen.

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

2. Los métodos y datos en un componente

Los datos de un componente deben ser provistos desde la función data() dentro del objeto de propiedades del componente, los métodos también pueden ser provistos desde esta función.

Vue.component("saludo", {
  template: `
        <div>
            <h2>AndyGeek</h2>
            <h2>{{saludo}}</h2>
            <h3>Esta es una suma: {{sumar(5,5)}}</h3>
        </div>
        `,
  data() {
    return {
      saludo: "Hola mundo",
      sumar: function (num1, num2) {
        return num1 + num2;
      },
    };
  },
});

Sin embargo, al igual que en la instancia de vue podemos definir propiedades computed y methods para las funciones y es más recomendable usar estas propiedades para los métodos.

Vue.component("saludo", {
  template: `
        <div>
            <h2>AndyGeek</h2>
            <h2>{{saludo}}</h2>
        </div>
        `,
  data() {
    return {
      saludo: "Hola mundo",
    };
  },
  methods: {
    // métodos
  },
  computed: {
    // métodos computed
  },
});

3. Componentes dentro de otros componentes

Vue nos permite anidar componentes de tal forma que podamos colocar un componente dentro de otro. Para hacer esto solo basta con colocar las etiquetas del componente hijo dentro de otro componente.

Vue.component("padre", {
  template: `
    <div style="background-color: gold;">
        <h2>Componente padre</h2>
        <hijo></hijo>
    </div>
    `,
});

4. Comunicación entre componentes

Esto se logra gracias a los props. Estos son atributos personalizados de las etiquetas HTML que podemos crear en Vue para enviar información hacia un componente hijo por medio de un atributo HTML. En el siguiente ejemplo creamos un prop dato_enviado dentro de la etiqueta del componente hijo por donde enviaremos información hacia este componente.

Vue.component("padre", {
  template: `
    <div style="background-color: gold;">
        <h2>Componente padre</h2>
        <hijo dato_enviado="Te envio 5"></hijo>
    </div>
    `,
});

Para recibir el dato enviado por el componente padre agregamos una propiedad debajo del template llamado props.

Vue.component("hijo", {
  template: `
    <div style="background-color: red;">
        <h4>Componente Hijo</h4>
        <h5>{{dato_enviado}}</h5>
    </div>
    `,
  props: ["dato_enviado"],
});

Una vez ya declarado el nombre del prop que envió el mensaje ya podemos usar este dentro de nuestro template usando {{ }}.

Sin embargo, este método solo sirve para enviar datos en forma de cadena o números. Si lo que queremos es enviar el valor de alguna variable tenemos que hacer uso de los bindings personalizados como en el siguiente ejemplo que usa :enviar como prop para enviar el valor de la variable dato_padre.

Vue.component("padre", {
  template: `
    <div style="background-color: gold;">
        <h2>Componente padre - Dato padre: {{dato_padre}}</h2>
        <hijo :envio="dato_padre"></hijo>
    </div>
    `,
  data() {
    return {
      dato_padre: 555,
    };
  },
});

Lo más fabuloso de Vue es que el dato que se envía es dinámico por lo que si cambiamos el dato en el componente padre también se cambiará en el componente hijo y viceversa.

5. Tu turno

Usando estos conceptos que acabamos de conocer de VueJs te animo a realizar el siguiente proyecto. Esta es una aplicación que agrega imágenes aleatorias en las cuales podemos crear y eliminar comentarios. Puedes probar la aplicación en andygeek.github.io/ComentarFotosApp_vuejs.

Cuando quieras puedes ver el código del proyecto terminado. Pero ándale inténtalo tu mismo!!

6. El código

El código del proyecto está en el siguiente repositorio github.com/andygeek/ComentarFotosApp_vuejs