Componente Modal y Componente Principal en Vue.js

Clase 22 de 38 • Curso Básico de Vue.js 2

Contenido del curso

Introducción

Rendering Declarativo y Manipulación de DOM

Sistema de Componentes

Ambiente de Desarrollo

Platzi Exchange

¡A producción!

38
Publicación de Aplicaciones con Git y Netlify
05:37 min

Rendering Declarativo y Manipulacion de DOM

Tomar examen

Armar un componente modal que se muestre al hacer click en un boton del componente padre (root) y que pueda ocultarse/cerrarse con otro boton dentro del componente modal

Hace fork de este CodePen para obtener la estructura básica del proyecto:

Consideraciones:

El componente modal debe:
- Usar una propiedad title para poder establecer el titulo del modal.
- Definir un slot para poder establecer el body del modal.
- Tener un boton con una directiva v-on a un metodo que emita un evento llamado close.
El componente root (Componente Principal) debe:
- Utilizar el component modal y mostrarlo solo cuando la propiedad showModal sea true.
- Definir una propiedad boolean llamada showModal que permite ocultar y mostrar el modal.
- Definir un método toggleModal que permita cambiar el valor de la propiedad showModal a su valor contrario (este metodo debe usarse con el boton "Show Modal").
- Escuchar el evento close del modal y ejecutar el metodo toggleModal cuando este se emite.
- Establecer el contenido de title del modal usando una propiedad y el contenido del bodyusando slots.

Solución

Comentarios

Jhonny Lincol Quispe Navarro

student•

Buen ejercicio para poner en práctica lo aprendido.

Me quedo asi:

Mi código:

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal With Vue || JCode</title>

    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div id="app">
        <button v-on:click="toggleModal">Show Modal</button>
        
        <!-- primero: para mostrar el modal, segundo: para enviar el titulo al hijo, tercero: el hijo envia el evento al padre, cuarto: el template envia html al hijo -->
        <modal
        v-show="showModal"
        v-bind:modal="modalData"
        v-on:change-valor="toggleModal">
            <template v-slot:body-modal>
                <p>Este es el grandioso modal que hicimos con Vue.js, aqui deberias de poner el contenido.</p>

                <img src="undraw.svg" alt="Image modal"/>
            </template>
        </modal>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="app.js"></script>
</body>
</html>

#app {
    padding: 20px;
    text-align: center;
}

.modal-mask {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity .3s ease;
}
.modal-container {
    width: 300px;
    padding: 20px 30px;
    text-align: left;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
    transition: all .5s ease;
}

.modal-container h3 {
    text-transform: uppercase;
    color: teal;
}
.modal-container .body {
    margin: 20px 0;
    color: dimgrey;
}
.body img {
    width: 100%;
}
.modal-container footer {
    text-align: right;
}
button {
    outline: none;
    cursor: pointer;
    padding: 10px 20px;
    font-weight: bold;
    background-color: dodgerblue;
    border:none;
    border-radius: 5px;
    color: floralwhite;
    transition: transform .3s ease;
}
button:hover {
    background-color: rgb(20, 107, 194);
    transform: scale(1.1);
}

Vue.component('modal', {
    props: ['modal'],

    data() {
        return {
            
        }
    },

    // emitimos el evento al padre
    methods: {
        close() {            
            this.$emit('change-valor')
        },
    },

    template: `
        <div class="modal-mask">
            <div class="modal-wrapper">
                <div class="modal-container">
                    <h3>{{ modal.title }}</h3>

                    <div class="body">
                        <slot name="body-modal"></slot>
                    </div>

                    <footer>
                        <button v-on:click="close">Cerrar</button>
                    </footer>
                </div>
            </div>
        </div>
    `
})

new Vue({
    el: '#app',

    data() {
        return {
            modalData: {
                title: 'Un Modal Increible', 
            },
            showModal: false,
        }
    },

    methods: {
        toggleModal() {
            this.showModal = !this.showModal
        }
    }
})

Jimmy Buriticá Londoño

student•

Muy bien presentado

Johnny José Barrantes De la O

student•

¡Listo! 😁 Aquí mi codepen

Cesar Antonio

student•

Una cosa de locos.

Guillermo Ramirez

student•

jsjs que lindo!>3

Abril Darynka Tapia Sosa

student•

Hola, tengo una pregunta, Si yo quisiera que this.$emit('close') se ejecutara con dblclick o algún otro evento de javascrip que no sea clock, como se definiría? he investigado pero no he logrado encontrarlo Aquí mi código del proyecto

Javier Salcedo Salgado

student•

Hola es tan sencillo como en vez de llamar el evento click usas el evento dblclick. Te muestro con algo de código. .

Vue.component('modal', {
  props: ['title'],
  methods: {
    close(){
      this.$emit('close-modal')
    }
  },
  template:`
    <button v-on:dblclick="close">Cerrar</button>
})

Isabella Susana

student•

**Mi solución: **

HTML

<body>
    <div id="app">
        <button v-on:click="toggleModal">Show Modal</button>
        
        <modal v-show="showModal" v-on:close="toggleModal">
         <template v-slot:body>
             <p>Cuerpo del modal...</p>
         </template>
        </modal>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
      <script src="app.js"></script>       
</body>

Vue.component('modal', {
     props:['toggleModal'],
    data:function(){
       
        return{
            title:'title',
        }
    },
    methods:{
      
        closeModal:function(){
            this.$emit('close')
        }
    },
    template: `
      <div class="modal-mask">
        <div class="modal-wrapper">
          <div class="modal-container">
            <h4>{{title}}</h4>

            <slot name="body"></slot>
            <footer>
              <button v-on:click="closeModal">Cerrar</button>
            </footer>
          </div>
        </div>
        
      </div>`
  })
  
  new Vue({
    el: '#app',
    data:function(){
        return{
            showModal:false
        }
    },
    methods:{
        toggleModal:function(){
            this.showModal=!this.showModal
        }
    }
  })

Santiago Rios Olaya

student•

https://github.com/Sr-santi/exercises_with_vue

Manuel Ojeda

student•

Lo del Slot es algo totalmente nuevo para mí, vaya utilidad que he dejado ir por bastante tiempo. Aquí el resultado: https://codepen.io/darkjeda/pen/QWWoqKv

Albert Eduardo Hidalgo Tavera

student•

Listo! https://codepen.io/itsalb3rt/pen/LYbOBKB?editors=1111

Joseph Paucar

student•

Este curso esta genial! Slots, emit, template... cuantas cosas nuevas para mi.

https://codepen.io/joseph_paucar/pen/NWWJXox

Usuario anónimo

user•

Fernando Rodriguez Davila

student•

he aprendido mucho!!!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>Componentes modales</title>
</head>
<body>
    <div id="app" class="d-flex justify-content-center" >
     
        <button class=" btn btn-success align-items-center" @click="toggleModal">Show Modal</button>
       
        
        <modal
        @change-state="toggleModal"
        v-show="showModal"
        >
        <template  v-slot:body>
            Este es un modal para todos, nunca pares de aprender.
            Llegará tu momento de triunfar, espera un poquito, sigue asi
            campeon. lo vas a lograr!!!!
        </template>
        <template v-slot:title>
            Un modal para que nunca pares de aprender.
        </template>

        </modal>
      </div>   
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
   <script src="index.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>

Vue.component('modal', {
   
    data(){
        return{
           
        }

    },
    methods:{
        close(){
            this.$emit("change-state")
        },
    },

    template: `
      <div  class="modal-mask">
        <div class="modal-wrapper">
          <div class="modal-container w-50 h-30 p-5">
            <h4>
            <slot name="title"></slot>
            </h4>
            <div class="mb-5">
            
            <slot name="body"></slot>
            
            </div>
            <footer>
              <button class="btn btn-danger" @click="close">Cerrar</button>
            </footer>
          </div>
        </div>
      </div>`
  })

  
  new Vue({
    el: '#app',
    data(){
        return{
            showModal:false
        }
    }
    ,methods:{
        toggleModal(){
            this.showModal=!this.showModal

        },
       
    }

  })

Johanna Apure Canónico

student•

🎊 https://codepen.io/japurecanonico/pen/zYJEBXe

Mario Adair Abarca de Jesús

student•

Bueno, mi ejercicio quedó así, Esta es la pantalla principal, lo que más trabajo me costo fue intentar centrar el botón de forma vertical, pero más o menos lo logré

Y así que la notifación

Este mi código: HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Proyecto 2</title>
</head>
<body>
    <div id="app">
        <button
        v-on:click="toggleModal">
        No me piques</button>
        
        <modal
        v-show="showModal"
        v-bind:titulo="modalData"
        v-on:change-valor="toggleModal">
            <template v-slot:body>
                <body>
                    <img src="lisa.jpg" alt="lisa rara">
                </body>
            </template>
        </modal>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="app.js"></script>
</body>
</html>

CSS

*{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

body{
    display: flex;
    align-items: center;
    height: 90vh;
}

#app {
    width: 100%;
    padding: 20px;
    text-align: center;
  }

html{
    background-image: url(fondo.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

button{
  background-image: -webkit-linear-gradient(top, #4a074a, #ef0fda);
  background-image: -moz-linear-gradient(top, #4a074a, #ef0fda);
  background-image: -ms-linear-gradient(top, #4a074a, #ef0fda);
  background-image: -o-linear-gradient(top, #4a074a, #ef0fda);
  background-image: linear-gradient(to bottom, #4a074a, #ef0fda);

  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  text-shadow: 3px 2px 1px #1859ba;
  -webkit-box-shadow: 6px 5px 24px #f9f1f9;
  -moz-box-shadow: 6px 5px 24px #f9f1f9;
  box-shadow: 6px 5px 24px #f9f1f9;
  font-family: Arial;
  color: #fafafa;
  font-size: 30px;
  padding: 19px;
  text-decoration: none;
}

button:hover {
  cursor: pointer;
  background: #2079b0;
  background-image: -webkit-linear-gradient(top, #ef0fda, #4a074a);
  background-image: -moz-linear-gradient(top, #ef0fda, #4a074a);
  background-image: -ms-linear-gradient(top, #ef0fda, #4a074a);
  background-image: -o-linear-gradient(top, #ef0fda, #4a074a);
  background-image: linear-gradient(to bottom, #ef0fda, #4a074a);
  text-decoration: none;
}

.chiquito{
  font-size: 12px;
  margin-top: 15px;
}
  
  .modal-mask {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    display: table;
    transition: opacity .3s ease;
  }
  
  .modal-wrapper {
    display: table-cell;
    vertical-align: middle;
  }
  
  .modal-container {
    width: 300px;
    margin: 0px auto;
    padding: 20px 30px;
    text-align: left;
    background-color: #4a074a;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
    transition: all .3s ease;
  }
  
  footer {
    text-align: right;
  }

Javascript

Vue.component('modal', {
    props: ['titulo'],

    methods: {
        close(){
            this.$emit('change-valor')
        },
    },

    template: `
      <div class="modal-mask">
        <div class="modal-wrapper">
          <div class="modal-container">
            <h4> {{titulo.title}} </h4>
            <div>Te dije que no me abrieras</div>
            <slot name="body"></slot>
            <footer>
              <button class="chiquito"
              v-on:click="close">Cerrar</button>
            </footer>
          </div>
        </div>
      </div>`
  })
  
  new Vue({
    el: '#app',

    data(){
        return{
            modalData: {
                title: '>:v',
            },

            showModal: false,
            
        }
    },

    methods: {
        toggleModal(){
            this.showModal = !this.showModal
        }
    }
  })

Sofi Caselli

student•

https://codepen.io/sofi-caselli/pen/YzGrXMG

Albert K. Camargo Barreda

student•

Arturo Rojas Enei

student•

Excelente ejercicio. Aquí mi solución

Cesar Murillo

student•

Me gusto realizar este ejercicio, refresca y aplicas lo aprendido .

https://codepen.io/zesaru/pen/pooXoXx

Daniel Hita Martínez

student•

He jugado un poquito con el CSS para darle algo de alegría... https://codepen.io/2raederdev/pen/rNaQOjZ

Cristopher Gonzalez

student•

https://codepen.io/cristophergonzalez/pen/LYVpBoX

Moisés Cedeño

student•

https://codepen.io/modavidc/pen/KKpweNP

Juan Jiménez

student•

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal With Vue || JCode</title>

    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div id="app">
        <button v-on:click="toggleModal">Show Modal</button>
        
        <!-- primero: para mostrar el modal, segundo: para enviar el titulo al hijo, tercero: el hijo envia el evento al padre, cuarto: el template envia html al hijo -->
        <modal
        v-show="showModal"
        v-bind:modal="modalData"
        v-on:change-valor="toggleModal">
            <template v-slot:body-modal>
                <p>Este es el grandioso modal que hicimos con Vue.js, aqui deberias de poner el contenido.</p>

                <img src="undraw.svg" alt="Image modal"/>
            </template>
        </modal>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="app.js"></script>
</body>
</html>

#app {
    padding: 20px;
    text-align: center;
}

.modal-mask {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity .3s ease;
}
.modal-container {
    width: 300px;
    padding: 20px 30px;
    text-align: left;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
    transition: all .5s ease;
}

.modal-container h3 {
    text-transform: uppercase;
    color: teal;
}
.modal-container .body {
    margin: 20px 0;
    color: dimgrey;
}
.body img {
    width: 100%;
}
.modal-container footer {
    text-align: right;
}
button {
    outline: none;
    cursor: pointer;
    padding: 10px 20px;
    font-weight: bold;
    background-color: dodgerblue;
    border:none;
    border-radius: 5px;
    color: floralwhite;
    transition: transform .3s ease;
}
button:hover {
    background-color: rgb(20, 107, 194);
    transform: scale(1.1);
}

Vue.component('modal', {
    props: ['modal'],

    data() {
        return {
            
        }
    },

    // emitimos el evento al padre
    methods: {
        close() {            
            this.$emit('change-valor')
        },
    },

    template: `
        <div class="modal-mask">
            <div class="modal-wrapper">
                <div class="modal-container">
                    <h3>{{ modal.title }}</h3>

                    <div class="body">
                        <slot name="body-modal"></slot>
                    </div>

                    <footer>
                        <button v-on:click="close">Cerrar</button>
                    </footer>
                </div>
            </div>
        </div>
    `
})

new Vue({
    el: '#app',

    data() {
        return {
            modalData: {
                title: 'Un Modal Increible', 
            },
            showModal: false,
        }
    },

    methods: {
        toggleModal() {
            this.showModal = !this.showModal
        }
    }
})

<body>
    <div id="app">
        <button v-on:click="toggleModal">Show Modal</button>
        
        <modal v-show="showModal" v-on:close="toggleModal">
         <template v-slot:body>
             <p>Cuerpo del modal...</p>
         </template>
        </modal>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
      <script src="app.js"></script>       
</body>

Vue.component('modal', {
     props:['toggleModal'],
    data:function(){
       
        return{
            title:'title',
        }
    },
    methods:{
      
        closeModal:function(){
            this.$emit('close')
        }
    },
    template: `
      <div class="modal-mask">
        <div class="modal-wrapper">
          <div class="modal-container">
            <h4>{{title}}</h4>

            <slot name="body"></slot>
            <footer>
              <button v-on:click="closeModal">Cerrar</button>
            </footer>
          </div>
        </div>
        
      </div>`
  })
  
  new Vue({
    el: '#app',
    data:function(){
        return{
            showModal:false
        }
    },
    methods:{
        toggleModal:function(){
            this.showModal=!this.showModal
        }
    }
  })

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>Componentes modales</title>
</head>
<body>
    <div id="app" class="d-flex justify-content-center" >
     
        <button class=" btn btn-success align-items-center" @click="toggleModal">Show Modal</button>
       
        
        <modal
        @change-state="toggleModal"
        v-show="showModal"
        >
        <template  v-slot:body>
            Este es un modal para todos, nunca pares de aprender.
            Llegará tu momento de triunfar, espera un poquito, sigue asi
            campeon. lo vas a lograr!!!!
        </template>
        <template v-slot:title>
            Un modal para que nunca pares de aprender.
        </template>

        </modal>
      </div>   
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
   <script src="index.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>

Vue.component('modal', {
   
    data(){
        return{
           
        }

    },
    methods:{
        close(){
            this.$emit("change-state")
        },
    },

    template: `
      <div  class="modal-mask">
        <div class="modal-wrapper">
          <div class="modal-container w-50 h-30 p-5">
            <h4>
            <slot name="title"></slot>
            </h4>
            <div class="mb-5">
            
            <slot name="body"></slot>
            
            </div>
            <footer>
              <button class="btn btn-danger" @click="close">Cerrar</button>
            </footer>
          </div>
        </div>
      </div>`
  })

  
  new Vue({
    el: '#app',
    data(){
        return{
            showModal:false
        }
    }
    ,methods:{
        toggleModal(){
            this.showModal=!this.showModal

        },
       
    }

  })

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Proyecto 2</title>
</head>
<body>
    <div id="app">
        <button
        v-on:click="toggleModal">
        No me piques</button>
        
        <modal
        v-show="showModal"
        v-bind:titulo="modalData"
        v-on:change-valor="toggleModal">
            <template v-slot:body>
                <body>
                    <img src="lisa.jpg" alt="lisa rara">
                </body>
            </template>
        </modal>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="app.js"></script>
</body>
</html>

*{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

body{
    display: flex;
    align-items: center;
    height: 90vh;
}

#app {
    width: 100%;
    padding: 20px;
    text-align: center;
  }

html{
    background-image: url(fondo.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

button{
  background-image: -webkit-linear-gradient(top, #4a074a, #ef0fda);
  background-image: -moz-linear-gradient(top, #4a074a, #ef0fda);
  background-image: -ms-linear-gradient(top, #4a074a, #ef0fda);
  background-image: -o-linear-gradient(top, #4a074a, #ef0fda);
  background-image: linear-gradient(to bottom, #4a074a, #ef0fda);

  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  text-shadow: 3px 2px 1px #1859ba;
  -webkit-box-shadow: 6px 5px 24px #f9f1f9;
  -moz-box-shadow: 6px 5px 24px #f9f1f9;
  box-shadow: 6px 5px 24px #f9f1f9;
  font-family: Arial;
  color: #fafafa;
  font-size: 30px;
  padding: 19px;
  text-decoration: none;
}

button:hover {
  cursor: pointer;
  background: #2079b0;
  background-image: -webkit-linear-gradient(top, #ef0fda, #4a074a);
  background-image: -moz-linear-gradient(top, #ef0fda, #4a074a);
  background-image: -ms-linear-gradient(top, #ef0fda, #4a074a);
  background-image: -o-linear-gradient(top, #ef0fda, #4a074a);
  background-image: linear-gradient(to bottom, #ef0fda, #4a074a);
  text-decoration: none;
}

.chiquito{
  font-size: 12px;
  margin-top: 15px;
}
  
  .modal-mask {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    display: table;
    transition: opacity .3s ease;
  }
  
  .modal-wrapper {
    display: table-cell;
    vertical-align: middle;
  }
  
  .modal-container {
    width: 300px;
    margin: 0px auto;
    padding: 20px 30px;
    text-align: left;
    background-color: #4a074a;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
    transition: all .3s ease;
  }
  
  footer {
    text-align: right;
  }

Vue.component('modal', {
    props: ['titulo'],

    methods: {
        close(){
            this.$emit('change-valor')
        },
    },

    template: `
      <div class="modal-mask">
        <div class="modal-wrapper">
          <div class="modal-container">
            <h4> {{titulo.title}} </h4>
            <div>Te dije que no me abrieras</div>
            <slot name="body"></slot>
            <footer>
              <button class="chiquito"
              v-on:click="close">Cerrar</button>
            </footer>
          </div>
        </div>
      </div>`
  })
  
  new Vue({
    el: '#app',

    data(){
        return{
            modalData: {
                title: '>:v',
            },

            showModal: false,
            
        }
    },

    methods: {
        toggleModal(){
            this.showModal = !this.showModal
        }
    }
  })

Componente Modal y Componente Principal en Vue.js

Introducción

Fundamentos de Vue: Componentes y Desarrollo de Aplicaciones Web

Vue.js: Desarrollo de Aplicaciones Web Profesionales

Creación de aplicaciones reactivas con Vue.js y HTML

Rendering Declarativo y Manipulación de DOM

Renderizado Declarativo en JavaScript: Estado y Vista Sincronizados

Uso de Expresiones JavaScript en Plantillas de Vue.js

Directivas para Atributos Dinámicos en HTML con Vue.js

Directivas de Renderizado Condicional en HTML con Vue.js

Uso de la Directiva v-for en Vue.js para Renderizar Listas

Manejo de Eventos en Vue.js: Click y Mouseover

Condiciones y Clases Dinámicas en Vue.js

Estilos Dinámicos en JavaScript: Cambios de Color Interactivos

Propiedades Computadas y Watchers en Vue.js

Interacción dinámica con formularios y directivas en Vue.js

"Crear un Tracker de Cursos con Vue.js"

Sistema de Componentes

Sistema de Componentes en Fren Word: Modularización y Reutilización

Creación de Componentes Personalizados en Vue.js

Comunicación entre Componentes en Vue.js: Props y Data Binding

Comunicación entre Componentes en Vue: Emisión y Manejo de Eventos

Uso de Slots para Inyectar HTML en Componentes Hijos

Ciclo de Vida de Componentes en Vue.js

Componentes de Vue: Creación y Gestión Eficiente