VUE JS

Componentes
Crear un proyecto llamado componente1 utilice el siguiente comando, con la versión 3

$ vue create componente1

$ cd componente1

$ npm run serve

● Crear un componente llamado CabeceraComp, que contenga en el segmento

Template el titulo de la pagina usar el Tag Header, aplicar un estilo para el color y
tamaño de letra
● Crear un componente llamado CuerpoCom, que contenga la siguiente estrucutra:

para la imagen tomar en cuenta el siguiente codigo, además que las imagenes
deben ser guardadas en la carpeta assets
<img class="display" src="../assets/logo.png"/>
aplicar un estilo para el color y tamaño de letra por cada tag

● Crear un componente llamado PiePagina que contenga en el segmento template el

pie de pagina usar el tag footer aplicar un estilo para el color y tamaño de letra
● Modifique el componente App.vue y utilize los 3 componentes creados
anteriormente. revise el siguiente codigo de ejemplo para usar un componente
<script>
import OtroComp from './components/OtroComp.vue'
 export default {
components: {
OtroComp,
}
}
</script>

<template>

<OtroComp />
<OtroComp /><OtroComp />
</template>

Propiedades en componentes
Es posible crear nuestras propios propiedades para enviar información a un componente
hijo.
Crear un proyecto llamado componente2 utilice el siguiente comando, con la versión 3

$ vue create componente2

$ cd componente2

$ npm run serve

Crear un componente llamado TituloComp utilize el siguiente codigo de ejemplo

<script>
export default {
props: {
msg: String
}
}
</script>

<template>
<h1>{{ msg || 'la propiedad no fue enviada' }}</h1>
</template>
modifique el archivo App.vue con el siguiente codigo

<template>
<TituloComp msg="Hola"/>
<TituloComp />
</template>
<script>
import TituloComp from './components/TituloComp.vue'
 export default {
name: 'App',
components: {
TituloComp
}
}
</script>
<style>
</style>

Ejercicio: Crear un componente llamado SubTituloComp que tambien reciba un valor, en el

template utilize el tag H2

Mensaje desde componente Hijo

Es posible enviar o emitir un mensaje al componente padre, crear un nuevo proyecto

$ vue create componente3

$ cd componente3

$ npm run serve

Crear un componente ChildComp con el siguiente codigo:

<script>
export default {
emits: ['response'],
created() {
this.$emit('response', 'hello from child')
}
}
</script>

<template>
<h2>Child component</h2>
</template>
Modifique el archivo App.vue con el siguiente codigo:
<script>
import ChildComp from './components/ChildComp.vue'

export default {
components: {
ChildComp
},
data() {
return {
childMsg: 'No child msg yet'
}
 }
}
</script>

<template>
<ChildComp @response="(msg) => childMsg = msg" />
<p>{{ childMsg }}</p>
</template>

Revise el codigo e identifique como se envia un mensaje al padre