Vue3中的teleport节点传送

最新推荐文章于 2025-05-20 23:49:54 发布

天渺工作室

最新推荐文章于 2025-05-20 23:49:54 发布

阅读量238

点赞数

分类专栏： Vue3 文章标签： vue3 节点传送 teleport

本文链接：https://blog.youkuaiyun.com/sinat_37255207/article/details/125401322

版权

Vue3 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了Vue3中teleport组件的使用，包括如何通过ref动态定位目标节点，以及如何利用v-if实现节点的动态添加和删除。实例展示了teleport在实际项目中的灵活应用。

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

Vue3 teleport官方文档地址：https://vuejs.org/guide/built-ins/teleport.html

Vue3中的teleport API极大方便了在Vue3业务逻辑中操作移动Dom位置。

简单举例

<script setup lang="ts">
    // 控制节点
    let teleportToTarget = ref<string>('#idtest');
</script>
<template>
    <div id="idTest">id节点1</div>
    <div class="main">main节点1</div>
    <div class="main">main节点2</div>
    
    <teleport  :to="teleportToTarget">
        <div>传送节点</div>
    </teleport>
</template>

1.当teleportToTarget 为#idTest时,节点会被传输到 #idTest 节点中，等同于

// let teleportToTarget = ref<string>('#idtest');
<template>
    <div id="idTest">
        id节点1<div>传送节点</div>
    </div>
    <div class="main">main节点1</div>
    <div class="main">main节点2</div>
</template>

2.当teleportToTarget 为.main时,节点会被传输到 .main时节点中，多个class同名，默认会传输到第一个节点中。等同于

// let teleportToTarget = ref<string>('.main');
<template>
    <div id="idTest">id节点1</div>
    <div class="main">
        main节点1
        <div>传送节点</div>
    </div>
    <div class="main">main节点2</div>
</template>

3.当teleportToTarget 为body时,节点会被传输到html元素的body节点末尾中。

// let teleportToTarget = ref<string>('body');

4.删除节点

需要动态删除节点，只需要用v-if动态控制节点存在,dom节点会动态跟随teleportToTargetShow布尔值动态是否存在。

<script setup lang="ts">
    // 控制节点
    let teleportToTarget = ref<string>('#idtest');
    // 控制传输节点是否存在
    let teleportToTargetShow = ref<boolean>(true);
</script>
<teleport v-if="teleportToTargetShow" :to="teleportToTarget">
   <div>传送节点</div>
</teleport>