Crear componentes con Vue.js

En Vue.js los componentes nos permiten extender nuestro código html. Además de lo visual, también podemos agregarle lógica, y reutilizar estos componentes.

Primero como siempre, importamos la librería en alguna parte de nuestro código:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Entonces ya podemos crear nuestro primer componente:

//Componente.
Vue.component('ejemplo', {
 template: '<p> Hola </p>' 
});
//Controlador.
new Vue({
 el: '#app' 
});

Aquí creamos un componente nuevo, al cual llamamos ‘ejemplo’. Dentro de la propiedad template, definimos cómo está compuesto ese contenido con código html.

Finalmente lo incluimos:

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

Ahora esto no tendría mucha utilidad si nos pudiésemos pasar propiedades, como a cualquier tag de html, por ejemplo el value de un input o el src de una imagen.

Para eso podemos hacer lo siguiente:

Vue.component('ejemplo', {
 props: ['nombre', 'apellido'],
 template: '<p> Hola {{nombre}} {{apellido}} </p>' 
});

Y lo probamos:

<ejemplo nombre="Juan" apellido="Perez"></ejemplo> 
<ejemplo nombre="Alejandra" apellido="Quiroga"></ejemplo>

En este caso en particular, agregamos a nuestro tag dos propiedades: nombre y apellido.

Ahora que entendemos esto podemos, hacer el siguiente ejercicio. Supongamos que tenemos una app en donde tenemos que elegir una lista de sabores de helados que nos gusten.

Por cada sabor nosotros tendremos un apartado visual donde vamos a ver el nombre del sabor y un botón para tildar o destildar el mismo. Todo esto podemos almacenarlo en un componente.

Primer creamos nuestro componente:

{Vue.component('component-helado', {
 props: ['helado'],
 template: `
    <div> 
       <button class="btn btn-success" v-on:click="agregar(helado)" v-if="!helado.seleccionado"> + </button> 
       <button class="btn btn-danger" v-on:click="eliminar(helado)" v-if="helado.seleccionado"> - </button> 
       <span> {{ helado.sabor }} </span> 
       <hr /> 
    </div> 
 `,
 methods: {
    agregar: function(p_helado){
       p_helado.seleccionado = true; 
    },
    eliminar: function(p_helado){ 
       p_helado.seleccionado = false; 
    }
 }
});

(Notar que para incluir el aspecto del componente usamos símbolos de acentos graves (`) y no comillas. Esto se debe a que en Javascript las comillas sólo permiten definir texto en una sola línea)

También agregamos un controlador:

new Vue({
 el: '#app',
 data: {
    helados: [
       {sabor: 'Chocolate', seleccionado: false},
       {sabor: 'Dulce de leche', seleccionado: false},
       {sabor: 'Frutilla', seleccionado: false},
       {sabor: 'Limón', seleccionado: false},
       {sabor: 'Vainilla', seleccionado: false} 
    ] 
 } 
});

Desde el controlador vamos a pasar la lista de sabores de helados:

helados: [
 {sabor: 'Chocolate', seleccionado: false},
 {sabor: 'Dulce de leche', seleccionado: false},
 {sabor: 'Frutilla', seleccionado: false},
 {sabor: 'Limón', seleccionado: false},
 {sabor: 'Vainilla', seleccionado: false} 
]

Cada uno de estos ítem vamos a pasarlo como propiedades al componente:

props: ['helado'],

El componente mediante ese elemento va a dibujar el contenido html:

template: `
 <div> 
    <button class="btn btn-success" v-on:click="agregar(helado)" v-if="!helado.seleccionado"> + </button> 
    <button class="btn btn-danger" v-on:click="eliminar(helado)" v-if="helado.seleccionado"> - </button> 
    <span> {{ helado.sabor }} </span> 
    <hr /> 
 </div> 
 `

Y vamos a agregar dos métodos, uno para seleccionar uno de los sabores a nuestra lista, y otro para quitarlo:

methods: {
 agregar: function(p_helado){
    p_helado.seleccionado = true; 
 },
 eliminar: function(p_helado){ 
    p_helado.seleccionado = false; 
 } 
}

Ahora ya podemos agregar nuestro componente, pero lo haremos dentro de un v-for, lo cual hará repetir la impresión del mismo por cada ítem de la lista de helados, tomando en cada vuelta las propiedades del mismo:

<div id="app" class="container">
 <h1> Helados </h1>
 <h2> Lista </h2>
 <ul>
    <li v-for="item in helados"> 
       <component-helado v-bind:helado="item"></component-helado> 
    </li> 
 </ul> 
 <h2> Seleccionados </h2>
 <ul>
    <li v-for="item in helados" v-if="item.seleccionado"> {{ item.sabor }} </li> 
 </ul> 
</div>

Como vemos en el código recorremos la lista de helados, y dibujamos cada resultado con el componente, al cual le pasamos como propiedad el helado que queremos dibujar.

Descargar ejemplo


2 Respuestas a “Crear componentes con Vue.js”

  1. Profesor usted es un dios… Gracias por los muchos aportes que le ha dado a conocer a la comunidad JS… Excelente trabajo… Saludos Cordiales