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
