Vue3 teleport官网文档地址：https://vuejs.org/guide/built...
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>