vue点击按钮关闭弹窗

在 Vue 中关闭弹窗可以通过以下步骤实现：

1. 在弹窗组件中定义一个布尔类型的数据属性，用于控制弹窗的显示和隐藏状态，例如：

<template>
  <div class="modal" v-show="showModal">
    <!-- 弹窗内容 -->
    <button @click="closeModal">关闭弹窗</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    };
  },
  methods: {
    closeModal() {
      this.showModal = false;
    }
  }
};
</script>

2. 在父组件中，通过调用子组件的方法来控制弹窗的显示和隐藏状态，例如：

<template>
  <div>
    <button @click="showModal = true">打开弹窗</button>
    <modal :showModal="showModal" @closeModal="showModal = false" />
  </div>
</template>

<script>
import Modal from './Modal.vue';

export default {
  components: { Modal },
  data() {
    return {
      showModal: false
    };
  }
};
</script>

在这个例子中，我们在父组件中通过 v-bind 绑定 showModal 属性，将子组件的 showModal 数据属性传递给子组件。同时，在子组件中定义了一个 closeModal 方法，用于在点击关闭按钮时关闭弹窗，并且通过 v-on 监听 closeModal 事件，在父组件中改变 showModal 属性的值，从而控制弹窗的显示和隐藏状态。