FRAMEWORKS
FRONT
Pensando en componentes
Divide y vencerás
Divide y vencerás
Este contenedor podría ser nuestro App.vue
Divide y vencerás
Esto podría ser un componente, que se encarga de cargar y mostrar el listado de commits CommitsList.vue o CommitsLoader.vue
Divide y vencerás
Esto podría ser un componente, que se encarga de cargar y mostrar el listado de ramas BranchesSelector.vue
Divide y vencerás
Esto podría ser un componente, que se encarga de recibir un objeto de tipo commit y representarlo en la pantalla Commit-item.vue
Teóricamente
<div id="app">
<h2>últimos commits del repo</h2>
<branches-selector/>
<commit-list/>
</div>Nuestro App.vue
<div class="branches">
<div class="branch"
v-for="branch in branches">
<input type="radio">
<label>{{branch.name}}</label>
</div>
</div>Nuestro BranchesSelector.vue
<div class="commits">
<div class="commit"
v-for="commit in commits">
<commit-item></commit-item>
</div>
</div>Nuestro CommitList.vue
<div class="commit">
<!-- all the display -->
</div>Nuestro CommitItem.vue
<div id="app">
<h2>últimos commits del repo</h2>
<branch-selector/>
<commit-list/>
</div>Nuestro App.vue
Recuerda que tendrás que declarar en el módulo de el App.vue que se están usando dos componentes
import CommitList from './components/CommitList';
import BranchSelector from './components/BranchSelector';
export default {
name: 'App',
components: {
CommitList,
BranchSelector
},
};Comunicar un componente con otro
<div class="commits">
<div class="commit"
v-for="commit in commits">
<commit-item></commit-item>
</div>
</div>Necesitas indicarle al componente <commit-item> que quieres que trabaje y dibuje un determinado commit que tu te has encargado de encontrar y que de hecho está dando vueltas en el v-for
props
<div class="commits">
<div class="commit"
v-for="commit in commits">
<commit-item :dato="commit">
</commit-item>
</div>
</div><template>
<h2> El nombre del commit {{ dato.name }} </h2>
</template>
<script>
export default {
name : 'commit-item',
props : [ 'dato' ]
}
</script>props
<div class="commits">
<div class="commit"
v-for="commit in commits">
<commit-item :dato="commit">
</commit-item>
</div>
</div>De esta manera le estamos pasando como atributo o como propiedad al componente <commit-item> nuestro objeto o variable commit y el nombre del atributo que hemos usado ha sido 'dato'
Pregunta: ¿por qué he puesto los : ?
<template>
<h2> El nombre del commit {{ dato.name }} </h2>
</template>
<script>
export default {
name : 'commit-item',
props : [ 'dato' ]
}
</script>De esta manera, si el componente quiere usar y acceder a ese commit que le han pasado, el ha de indicar que le llega una propiedad externa con el nombre "dato" para poder usarla
props
Probamos esto con el todo-list en directo
Comunicación de dentro hacia afuera
<!-- Esto sería en el fichero list.vue -->
<div class="lista">
<list-item :item="item" v-for="item in items" />
</div
<!-- Esto sería en el fichero list-item.vue -->
<div class="item">
<span>{{item.name}} x {{item.price}}</span>
<button @click="borrarAEste(item.name)">Borrar</button>
</div><!-- Esto sería en el fichero list.vue -->
<div class="lista">
<list-item
:item="item"
v-for="item in items"
v-on:borrarFruta="doThis"
/>
</div>
methods : {
doThis (nombreFruta) {
console.log(nombreFruta)
}
}Paso 1. Definimos un evento
<div class="item">
<span>{{item.name}} x {{item.price}}</span>
<button
@click="$emit('borrarFruta', item.name)">Borrar</button>
</div>Paso 2. Ejecutamos/emitimos ese evento en el componente hijo
<div class="item">
<span>{{item.name}} x {{item.price}}</span>
<button
@click="$emit('borrarFruta', item.name)">Borrar</button>
</div>Resultado final
<div class="lista">
<list-item
:item="item"
v-for="item in items"
@borrarFruta="doThis"
/>
</div>
Completamos el ejercicio hasta que funcione :)
Siguiente ejercicio en grupo
Completamos el ejercicio hasta que funcione :) Nos creamos nuestra api
V2.0 Lo mismo pero con API
Continuamos con nuestros proyectos.
Avanzamos con la parte de WebApp
Curso de Programación web CLM Marzo 2025 VueJS. Componentes Repaso
By Yunior González Santana
Curso de Programación web CLM Marzo 2025 VueJS. Componentes Repaso
Curso de Programación web CLM Marzo 2025 VueJS. Componentes Repaso
