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

Eugenio Chaparro

Compartir
Publicado por
Eugenio Chaparro

Entradas recientes

[Solo el ganador sobrevive] Juego de las Canicas del Juego del Calamar en Roblox Studio

[Solo el ganador sobrevive] Juego de las Canicas del Juego del Calamar en Roblox Studio

En este tutorial vamos a eliminar todos los demĆ”s jugadores que no ganaron y a…

4 semanas hace
[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