Vue关闭当前弹窗页面的两种方式

<template>
  <div class="modal">
    <div class="modal-content">
      <span class="close" @click="closeModal">&times;</span>
      <p>弹窗内容</p>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    closeModal() {
      this.$emit('close');
    }
  }
}
</script>

<template>
  <div>
    <button @click="showModal = true">打开弹窗</button>
    <modal v-if="showModal" @close="showModal = false"></modal>
  </div>
</template>
<script>
import Modal from './Modal.vue';
export default {
  components: {
    Modal
  },
  data() {
    return {
      showModal: false
    }
  }
}
</script>

const router = new VueRouter({
  routes: [
    {
      path: '/modal',
      component: Modal,
      beforeRouteLeave(to, from, next) {
        this.$emit('close');
        next();
      }
    }
  ]
});

<template>
  <div>
    <button @click="showModal = true">打开弹窗</button>
    <modal v-if="showModal" @close="showModal = false"></modal>
  </div>
</template>
<script>
import Modal from './Modal.vue';
export default {
  components: {
    Modal
  },
  data() {
    return {
      showModal: false
    }
  }
}
</script>