Como Crear un Componente en Vue JS 2 y reutilizarlo

Vue JS

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’)

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

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

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

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

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.

 

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required