Como Crear un Componente en Vue JS 2 y reutilizarlo

Nube Colectiva

hace 6 años

Una de las características más interesantes del Framework Vue JS es la posibilidad de crear y trabajar con componentes, los cuales nos permiten colocar código en su interior para poder utilizar el código en el, las veces que queramos, en este artículo te explicaremos como trabajar con componentes en Vue JS.

Antes de continuar con este artículo, debemos detallar que estamos trabajando con la versión 2 de Vue JS.

Crear un Componente

Para crear un componente puedes iniciar escribiendo Vue.component(‘texto’)


  Vue.component('texto',{
    template : `<h1>Hola soy un Componente</h1>`,
  });
		
  new Vue({
    el: '#contenedor'
  });

Vue.component('texto',{

template : `<h1>Hola soy un Componente</h1>`,

});

new Vue({

el: '#contenedor'

});

En mi elemento texto imprimiremos un texto ‘Hola soy un Componente’ y el contenedor general en donde se imprimirá el texto sera el div id=”contenedor”></div> lo agregamos en nuestra vista HTML


<!-- declaramos el 'contenedor' y el elemento 'texto' en nuestra vista -->
<div class="col-sm-12" id="contenedor">				
  <texto> Hola soy un Componente </texto>
</div>

<!-- Obtenemos -->
Postres
  Torta de Chocolate
  Gelatina de Fresa
  Pye de Manzan

<texto> Hola soy un Componente </texto>

</div>

Postres

Torta de Chocolate

Gelatina de Fresa

Pye de Manzan

Reutilizar Componente

Esto es lo que más resalta de Vue JS, podemos emplear el mismo componente para evitar escribir de nuevo todo el código.

Vamos a retocar un poco el código para reutilizar un componente, Supongamos que tenemos 2 listas de Postres una lista con los Postres Agotados y otra con los Postres en Stock, entonces utilizaremos el mismo componente pero con diferentes datos Agotados y en Stock


Vue.component('texto',{
  props    : ['lista'],
  template : `<ul>
  	          <li v-for="postre in lista">
		    {{ postre.nombre }}
	          </li>
	      </ul>`,
});
		
new Vue({
  el: '#contenedor',
  // Acá tenemos los 2 datos, uno de Postres Agotados y otro con un Postre en Stock
  data: {
    agotados: [
      {nombre: 'Torta de Chocolate'},
      {nombre: 'Gelatina de Fresa'}
    ],
    stock: [
      {nombre: 'Pye de Manzana'}
    ]
  }
});

Vue.component('texto',{

props : ['lista'],

template : `<ul>

</li>

</ul>`,

});

new Vue({

el: '#contenedor',

// Acá tenemos los 2 datos, uno de Postres Agotados y otro con un Postre en Stock

data: {

agotados: [

{nombre: 'Torta de Chocolate'},

{nombre: 'Gelatina de Fresa'}

stock: [

{nombre: 'Pye de Manzana'}

]

}

});

Lo que hacemos es que en template, específicamente en la lista li utilizaremos la directiva v-for para renderizar ambas listas dinámicamente manteniendo el mismo componente para ambas listas, para que no haya conflictos a la hora de renderizar las listas y en nuestra vista HTML utilizamos la directiva v-bind y le agregamos el props ‘lista’ para separar ambas vistas


<div class="col-sm-12" id="contenedor">

  <h2>Postres Agotados</h2>
  <texto v-bind:lista="agotados"></texto>

  <h2>Postres en Stock</h2>
  <texto v-bind:lista="stock"></texto>

</div>

<h2>Postres Agotados</h2>

<h2>Postres en Stock</h2>

</div>

Entonces en nuestra vista obtendremos ambas listas con datos de Postres Agotados y en Stock


Postres Agotados
  Torta de Chocolate
  Gelatina de Fresa

Postres en Stock
  Pye de Manzana

Postres Agotados

Torta de Chocolate

Gelatina de Fresa

Postres en Stock

Pye de Manzana

Nota

En las próximas versiones de Vue JS, pueden cambiar las sintaxis que usamos en este artículo, estaremos pendientes, para escribirlo en un nuevo artículo, pero si deseas puedes escribirlo en un comentario, así estaremos ayudando a los demás desarrolladores, seamos colaborativos con la información en la Nube la cual tiene que ser Colectiva.

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.