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













Comentarios

Facebook Like

Entri Populer

hackear wifi con kali linux 馃摗

Instalar Netbeans 10 en Windows 10

Instalar netbeans 10 en ubuntu 18.04