A、定义modal

一、定义Teleport

<template>
  <teleport to="#modal">
    <div id="center" v-if="isOpen">
      <h2>
        <slot>This is a modal</slot>
      </h2>
      <button @click="handleClick">关闭</button>
    </div>
  </teleport>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
  props: {
    isOpen: {
      type: Boolean,
      default: true,
    },
  },
  emits: {
    "close-modal": null,
  },
  setup(props, context) {
    const handleClick = () => {
      context.emit("closeModal");
    };
    return {
      handleClick,
    };
  },
});
</script>

二、父组件接收事件

<template>
  <Modal :isOpen="isShow" @closeModal="handleModal"></Modal>
  <div>About</div>
</template>
<script setup>
import { reactive, toRefs } from '@vue/reactivity'
import Modal from './Children/Modal.vue'
const state = reactive({
  isShow:true,
  handleModal(){
    state.isShow = false
  }
})
const {isShow,handleModal} = toRefs(state);
</script>