【vue3】vue3新增内置组件teleport用法

我们的vue组件在初始化的时候，把根组件挂载到了一个元素上，后续所有的子组件都在这个根组件的里边，就像这样：

但是有时候，为了能够快速的定位到元素，我们不想让vue把内容渲染到id="app"这个元素里，比如你写了一个全屏的组件，或者一个弹窗组件。在vue2的时候，我们可以使用原生js去把组件内容主动渲染到其他位置，比如body下面。但是vue3我们不必这样做了，vue3提供了一个新的内置组件 teleport，他接受一个参数to，值为目标。你可以把他看成slot，他包裹的内容就会被渲染到to指向的标签内部，to的值可以是#id,.class或者标准的html标签名，下面来看示例：

<script setup lang="ts">
import {