09.-Vue js 2 tutorial español ? [Componentes anidados]??
Introducción
En este tutorial vamos a trabajar con mas componentes, si mas componentes, porque vuejs es lo que nos dice que es lo debemos estudiar, para ser exactos vamos a trabajar con componentes anidados. En otras palabras vamos a crear 2 componentes uno dentro del otro y entre ellos se van a comunicar
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>
Vue.component('padre',{
template: //html
`
<div class='p-5 bg-dark text-white' >
<h2>PAPA {{numeroPadre}}</h2>
<button class="btn btn-danger" @click="numeroPadre++" >+</button>
<hijo :numero=numeroPadre></hijo>
</div>
`,
data(){
return{
numeroPadre:10
}
}
});
Vue.component('hijo',{
template: //html
`
<div class='p-5 bg-success text-white' >
HIJO
<h2>{{numero}}</h2>
</div>
`,
props:['numero']
});
const con=new Vue({
el:"#elemento",
data:{
}
});
</script>
</html>
Codigo en codepen.io: https://codepen.io/programadornovato/pen/OYZaVq
Codigo en github.com: https://github.com/programadornovato/vuejs
Video
Ave que vuela, a la cazuela.