【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 { ref } from 'vue'
const message = ref("hello world!")
</script>
<template>
    <div>
        <div>233333333</div>
        <teleport to='body'>
            <span>{{message}}</span>
        </teleport>
    </div>
</template>

这里包裹了hello world，目标渲染地址为body元素。打开F12控制台查看：

可以看到，hello world被渲染到了body元素内部的尾部。
有帮助的话，点个赞呗！关于vue3的一切疑问，大家可以在评论区留言提问。

上一篇：vue3 setup如何使用watch？
下一篇：nodejs如何读取并修改文件内容？