¿Cómo cerrar el modelo desde un botón usando vue.js?

Este artículo nos informará sobre cómo cerrar un modal desde un botón usando vue.js. Para cerrar un modal usando vue.js, puede usar el evento de clic, es decir, @click para activar el cambio en la visibilidad modal. Entonces, cada vez que se presiona el botón de cerrar, el método @click activará la función asociada con la acción (aquí, ocultando el modal).

Sintaxis

Paso 1: 

Agregue la propiedad @click=”$emit(‘close’)” al botón de cerrar del modal.

<button type="button" class="close" 
    @click="$emit('close')"> X 
</button>

Paso 2: 

En el componente donde se usa modal, agregue propiedades modales cerradas y modales abiertas en los datos

data () {
     return {
       isModalVisible: false,
     };
   },
   methods: {
     showModal() {
       this.isModalVisible = true;
     },
     closeModal() {
       this.isModalVisible = false;
     }
   },
 };

Código de muestra:

Creando el componente modal

<!--Modal.vue-->
  
<script>
  export default {
    name: 'modal',
  };
</script>
<template>
  <transition name="modal-fade">
    <div class="modal-backdrop">
      <div class="modal"
        role="dialog"
        
      >
        <header
          class="modal-header"
          id="modalTitle"
        >
          <slot name="header">
            Modal Header: GeeksforGeeks
            <button
              type="button"
              class="close"
              @click="$emit('close')" <!--Added the Click Event-->
  
            >
                X
            </button>
          </slot>
        </header>
        <section
          class="modal-body"
          id="modalDescription"
        >
          <slot name="body">
            Closing modal using vue.js
          </slot>
        </section>
      </div>
    </div>
  </transition>
</template>
<style>
  .modal-backdrop {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(133, 226, 100, 0.427);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .modal {
    background: #eeeeee;
    width: 50%;
    height: 30%;
    box-shadow: 2px 2px 20px 1px;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
  }
  
  .modal-header{
    padding: 15px;
    display: flex;
  }
  
  .modal-header {
    border-bottom: 1px solid #eeeeee;
    font-size: 30px;
    color: #4AAE9B;
    justify-content: center;
  }
  .modal-body {
    position: relative;
    font-size: 30px;
    align-self: center;
    padding: 20px 10px;
  }
  .close {
    border: none;
    font-size: 30px;
    margin-left: 100px;
    cursor: pointer;
    font-weight: bold;
    color: #4AAE9B;
    background: transparent;
  }
</style>

Usando el componente modal en App.vue

<!--App.vue-->
  
<script>
  import modal from './components/modal.vue';
  
  export default {
    name: 'app',
    components: {
      modal,
    },
    data () {
      return {
        isModalVisible: false,
      };
    },
    methods: {
      showModal() {
        this.isModalVisible = true;
      },
      closeModal() {
        this.isModalVisible = false;
      }
    },
  };
</script>
  
<template>
  <div id="app">
    <button
      type="button"
      class="btn"
      @click="showModal"
    >
      Open Modal
    </button>
  
    <modal
      v-show="isModalVisible"
      @close="closeModal"
    />
  </div>
</template>

Producción