10 2Bvuejs

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

10 2Bvuejs

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

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

En Programador Novato vivimos de los anuncios, hemos detectado que está utilizando extensiones para bloquear anuncios. Ayudanos deshabilitando tu bloqueador de anuncios. :)