Vue3-Teleport

• 将组件挂载到某个#id下面，相当于传送门
• 例如：Dialog对话框，通过一个独立的组件，被挂载到某个组件下面，容易受到干扰

参考文档

1. Modal.vue 组件

<template>
  <teleport to="#modal">
    <div id="center" v-if="isOpen">
      <slot></slot>
      <button @click="buttonClick">关闭</button>
    </div>
  </teleport>
</template>

如图所示，当Modal组件显示时，通过teleport穿透到，id="modal" 的元素下面。