模态组件-如何包含其他组件以及如何从其他组件打开/关闭

// 模态组件
<template>
  <div v-if="isOpen" class="modal">
    <div class="modal-content">
      <slot></slot> <!-- 包含其他组件的位置 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false // 控制模态组件的显示与隐藏
    };
  }
};
</script>

// 打开/关闭模态组件的组件
<template>
  <div>
    <button @click="openModal">打开模态组件</button>
    <button @click="closeModal">关闭模态组件</button>
    <ModalComponent v-if="isModalOpen">
      <!-- 其他组件的内容 -->
      <FormComponent></FormComponent>
      <ListComponent></ListComponent>
    </ModalComponent>
  </div>
</template>

<script>
import ModalComponent from './ModalComponent.vue';
import FormComponent from './FormComponent.vue';
import ListComponent from './ListComponent.vue';

export default {
  components: {
    ModalComponent,
    FormComponent,
    ListComponent
  },
  data() {
    return {
      isModalOpen: false // 控制模态组件的显示与隐藏
    };
  },
  methods: {
    openModal() {
      this.isModalOpen = true; // 打开模态组件
    },
    closeModal() {
      this.isModalOpen = false; // 关闭模态组件
    }
  }
};
</script>