09 2Bvuejs

09.-Vue js 2 tutorial español ? [Componentes anidados]??

09 2Bvuejs

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

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. :)