Componentes en VUEjs

Vamos aprender a cómo crear componentes en VUE. Con componentes nos referimos a esos bloques de html que son estándar y que se usan varias veces con el mismo objetivo, todo esto con la única finalidad de aplicar la reutilización de código y reducir esas líneas de más.

Inicia sesión para poder registrar las lecciones que has completado Login

En esta oportunidad vamos a usar un ejemplo con dos listas, es decir cada lista va a tener la misma estructura con sus etiquetas <ul>, <li> y las mismas clases bootstrap, pero cada lista va a mostrar un contenido diferente. Algo como esto:

<ul class="list-group">
    <li v-for="item in albums" class="list-group-item">
        {{ item.title }}
    </li>
</ul>
<ul class="list-group">
    <li v-for="item in posts" class="list-group-item">
        {{ item.title }}
    </li>
</ul>

Si nos fijamos en este código posee exactamente la misma estructura y nos damos cuenta que lo único que cambia son las variables albums y posts a las que estamos iterando para presentación de los datos, es aquí cuando podemos hacer uso de un Componente de VUE y es lo que te vamos a enseñar.

 

Código VUE

Para el ejercicio básicamente el código será el mismo al de anteriores videos, con la conexión cdn tanto a vue como axios, además de dos métodos getPosts y getAlbums cuya función será conectarse a una url diferente de un servidor y extraer los datos en formato JSON, esto ya lo hemos explicado para otros ejercicios por lo cual no profundizaremos y el código resultante sería el siguiente:

<script type="text/javascript">		
    var urlPosts  = 'https://jsonplaceholder.typicode.com/posts';
    var urlAlbums = 'https://jsonplaceholder.typicode.com/albums';
    new Vue({
        el: '#main',
	created: function() {
	    this.getPosts(),
            this.getAlbums()
	},
	data: {
	    posts: [],
	    albums: [],
	},
	methods: {
	    getPosts: function() {
	        axios.get(urlPosts).then(response => {
		    this.posts = response.data
		});
	    },
	    getAlbums: function() {
	        axios.get(urlAlbums).then(response => {
		    this.albums = response.data
		});
            }
        }
    });
</script>

 

Creando un componente

Para la creación de un componente tenemos que utilizar la siguiente línea Vue.component(nombre_componente, objeto) esta función recibe dos parámetros. El primer parámetro será el nombre del componente el cual utilizaremos en la vista para reemplazar las listas actuales. El segundo parámetro será un objeto con dos propiedades, la propiedad props define un variable en común para albums y posts que en este caso sería “lists”. Luego la propiedad template define un plantilla que en nuestro caso sería la lista con sus etiquetas <ul>, <li> y sus clases. En la plantilla del componente la directiva v-for ya no iteraría en las listas albums o posts sino que ahora lo hace usando la propiedad común lists.

Vue.component('common-list',{
    props    : ['lists'],
    template : `<ul class="list-group">
        <li v-for="item in lists" class="list-group-item">
	    {{ item.title }}
	</li>
    </ul>`,
});

 

Implementación del componente

Una vez que ya hemos creado nuestro componente en vue, ahora si ya podemos usarlo en nuestra página, ¿cómo? Pues muy sencillo, el nombre del componente se convierte en una etiqueta html de esta forma <common-list></common-list>, simplemente que con la directiva v-bind nos conectamos a la propiedad común lists y le asignamos como valor cualquiera de las dos propiedades albums o posts. Esto va a iterar en sus elementos y tendremos el mismo resultado pero con la gran diferencia de que el código ha sido simplificado y con la capacidad de ser reutilizado cuantas veces se lo de desee.

<div class="col-sm-4">
    <h1>Album</h1>
    <common-list v-bind:lists="albums"></common-list>
</div>
<div class="col-sm-4">
    <h1>Posts</h1>
    <common-list v-bind:lists="posts"></common-list>
</div>

¿Qúe te pareció esto? Interesante no es así, con esto podemos ahorrarnos largas líneas de código y hacerlo todo más claro. Espero que este tutorial te haya gustado y hayas aprendido un poco más sobre las maravillosas funcionalidades del framework VUE.

Adquiere en preventa y aprovecha un gran descuento TDD en Laravel

Comparte en

Creado por: Venezuela Italo Morales

Profesor de #Laravel y #PHP en Rimorsoft Online

Más información


Spatie/Laravel Permission ¿Cómo agregar campos en la tabla "roles"?

Hola, mi consulta es la siguiente:

Relacioné la tabla "roles" con mi tabla** "empresa**", es decir, en la tabla "roles", tengo el campo "id_empresa", en la vista, están los campos necesarios y el select de la empresa pero al querer guardar los datos, me arroja el siguiente error: ** "The given role or permission should use guard web instead of Empresas. "** No ...

SOFTWARE PARA CONSULTORIOS MEDICOS

Hola Amigos. soy nuevo en el grupo.. me gustaria saber si alguien tiene o tuvo algun proyecto basado en laravel, para consultorios medicos? ...

sincronización de componentes hermanos

un gran saludo a la comunidad rimorsorf... espero de su valiosa ayuda para mi problema que es el siguiente:

tengo dos componentes en el mismo nivel, el primero crea una tabla con una lista de procesos por tramitar y el segundo componente lista en una tabla los procesos que se han asignado para tramitar; cuando en la primera tabla se asigna el proceso este debe desaparecer de...

plantilla blade y vuejs2

buenas noches comunidad, por casualidad alguien sabrá si se puede integrar la plantilla de laravel blade en vuejs2 component??, gracias dee antemano...