Vue作业中的父组件内有一个开关按钮，控制子组件内的模态框，模态框内的关闭按钮改变父组件的按钮状态（完成模态框的关闭）怎么写

在Vue.js中，你可以通过props和事件绑定来实现这种交互。首先，在父组件（ParentComponent.vue）中定义一个开关按钮，并将开关的状态作为prop传递给子组件（ModalComponent.vue）。然后在子组件中，当关闭按钮被点击时，触发一个自定义事件，将关闭信息传回给父组件。

**ParentComponent.vue**

<template>
  <div>
    <button v-model="modalOpen" @click="toggleModal">打开/关闭模态框</button>
    <modal :is-open="modalOpen" @close="handleClose"></modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      modalOpen: false,
    };
  },
  methods: {
    toggleModal() {
      this.modalOpen = !this.modalOpen;
    },
    handleClose(event) {
      // 这里event通常会包含子组件传递的信息，比如关闭原因等
      console.log('模态框已关闭', event);
      this.modalOpen = false; // 关闭父组件的开关
    },
  },
};
</script>

**ModalComponent.vue**

<template>
  <div class="modal" v-if="isOpen">
    <!-- 模态框内容 -->
    <button @click="$emit('close')">关闭</button>
  </div>
</template>

<script>
export default {
  props: ['isOpen'],
  methods: {},
  // 当模态框关闭时发出自定义事件
  beforeDestroy() {
    this.$emit('close');
  },
};
</script>

在这个例子中，`modalOpen`表示开关状态，`@click="toggleModal"`用于开启/关闭模态框，`@close="handleClose"`用于接收并处理来自子组件关闭事件的回调。子组件的`beforeDestroy`钩子会在组件销毁前触发，自动发送关闭事件。