VUE3-利用teleport标签传送并制作模态框（20）

本案例用到VUE3的一个标签叫<teleport></teleport>，此标签的to属性表示传送的目的地，值为html元素，作用是将此标签内部嵌套的其他元素传送到目的地。为什么要用这个玩意？举一个栗子：小王写了一个组件，是一个模态框的组件，非常好用，此时在我这边的项目中组件间是嵌套了非常多的层级的，导致当我使用小王的组件时，展开模态框，从而把我的其他内容全部撑开，破坏了页面样式，导致问题的产生，这时候如果小王是用的<teleport></teleport>标签嵌套的模态框（标签内容是传送到body标签的最后的），当我们使用他的组件时，就不用担心展开模态框会破坏页面结构，因为他的模态框是body标签的内容，样式是相对于body标签进行定位的，所以他的模态框完全影响不到我们现有的页面样式，十分好用！

此时我现有项目

父组件App.vue

<template>
  <div class="app">
    <h1>这是祖先组件</h1>
    <ChildComponent></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from "@/components/ChildComponent";

export default {
    
  name: 'App',
  components: {
    ChildComponent}
}
</script>

<style>
.app {
    
  background-color: gray;
  padding: 10px;
}
</style>

子组件ChildComponent.vue

<template>