10.-Vue js 2 tutorial espa帽ol 馃憖 [Componentes anidados enviar datos del hijo al padre]馃憖馃憖


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




Comentarios

Facebook Like

Entri Populer

hackear wifi con kali linux 馃摗

Instalar Netbeans 10 en Windows 10

Instalar netbeans 10 en ubuntu 18.04