10.-Vue js 2 tutorial espa帽ol ? [Componentes anidados enviar datos del hijo al padre]??

Introducci贸n

En este tutorial vamos a ver mas componentes, pero va a ser algo muy simple, solo vamos a enviar informaci贸n del componente hijo hacia el padre, si recuerdan en el tutorial anterior enviamos informaci贸n del componente padre al hijo y en este caso va a ser a la inversa. Ademas nos va聽 ayudar a conocer聽https://vuex.vuejs.org聽el cual nos ayuda a almacenar informacion de forma centralizada para poder acceder a esta informaci贸n desde cualquier componente.

Codigo

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Vuejs</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div id="elemento" class="container">
<padre></padre>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// PADRE
Vue.component('padre',{
template: //html
`
<div class='p-5 bg-dark text-white' >
<h2>PAPA {{numeroPadre}}</h2>
<h2>HIJO {{nombreHijo}}</h2>

<button class="btn btn-danger" @click="numeroPadre++" >+</button>

<hijo :numero=numeroPadre @nombreHijo="nombreHijo=$event" ></hijo>
</div>
`,
data(){
return{
numeroPadre:10,
nombreHijo:''
}
}
});
// HIJO
Vue.component('hijo',{
template: //html
`
<div class='p-5 bg-success text-white' >
HIJO
<h2>{{numero}}</h2>
<button @click=numero++ >+</button>
<h2>{{nombreHijo}}</h2>
</div>
`,
props:['numero'],
data(){
return{
nombreHijo:'Pepito2'
}
},
mounted() {
this.$emit('nombreHijo',this.nombreHijo);
},
});

const con=new Vue({
el:"#elemento",
data:{
}
});
</script>
</html>

Codigo en github.com: https://github.com/programadornovato/vuejs
Codigo en codepen.io: https://codepen.io/programadornovato/pen/NVzgdQ

Video

Eugenio Chaparro

Compartir
Publicado por
Eugenio Chaparro

Entradas recientes

[Seleccionar ganador] Juego de las Canicas del Juego del Calamar en Roblox Studio

[Seleccionar ganador] Juego de las Canicas del Juego del Calamar en Roblox Studio

En este tutorial detectaremos cuando se hayan terminado las canicas y mostraremos un ganador. Creamos…

4 semanas hace
[Colocar Marcador] Juego de las Canicas del Juego del Calamar en Roblox Studio

[Colocar Marcador] Juego de las Canicas del Juego del Calamar en Roblox Studio

En este tutorial vamos extraer todos los goles de los jugadores y los vamos a…

4 semanas hace