vue3.0 teleport传送组件，使用

唐策

于 2022-05-04 21:34:41 发布

阅读量748

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue-js 文章标签： vue

本文链接：https://blog.csdn.net/qq_29132907/article/details/124577702

vue-js 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了Vue 3中的Teleport组件的用法，特别是其在页面加载时如何影响元素的层级。通过示例展示了如何将loading提示通过Teleport放置在body中，并讨论了`v-if`和`v-show`对元素层级的影响。同时，文章探讨了Teleport在实际项目中的应用场景及其样式定位的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可以把标签，直接暴露在指定路径下
在这里插入图片描述

<template>
   <div class="content">
   <!-- 只有v-if="false" 比teleport层级高 ,v-show='false'层级低-->
       <teleport to="body">
           <div class="loading">
               loading.....
           </div>
       </teleport>
   </div>
</template>
<script setup lang='ts'>
import {ref, reactive} from 'vue'
</script>
<style scoped>
.content{
    background: red;
}
.loading{
    position: absolute;
    top: 0;
    left: 0;
    background: blue;
}
</style>