vue中子组件点击按钮关闭父组件弹窗

在 Vue 中，子组件可以通过 $emit 方法向父组件发送事件，从而实现子组件点击按钮关闭父组件弹窗的功能。

以下是在子组件中通过 $emit 向父组件发送事件的示例代码：

父组件：

<template>
  <div>
    <button @click="showModal = true">打开弹窗</button>
    <child-component @closeModal="showModal = false" />
    <div class="modal" v-show="showModal">
      <!-- 弹窗内容 -->
    </div>
  </div>
</template>

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

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

子组件：

<template>
  <div>
    <button @click="closeModal">关闭弹窗</button>
  </div>
</template>

<script>
export default {
  methods: {
    closeModal() {
      this.$emit('closeModal');
    }
  }
};
</script>

在这个例子中，我们在父组件中定义了一个名为 showModal 的数据属性，用于控制弹窗的显示和隐藏状态。在子组件中，我们定义了一个名为 closeModal 的方法，当点击按钮时，该方法通过 $emit 方法触发了一个名为 closeModal 的事件。在父组件中，我们通过 v-on 监听子组件的 closeModal 事件，并在方法中改变 showModal 属性的值，从而实现了子组件点击按钮关闭父组件弹窗的功能。