在组件化开发中，我们封装一个组件A，在另一个组件B中使用：
- 那么组件A中template的元素，会被挂载到组件B中template的某个位置；
- 最终我们的应用程序会形成一颗Dom树结构；
但是某些情况下，我们希望组件不是挂载在这个组件树上的，可能是移动到Vue app之外的其他位置:
- 比如移动到body元素上，或者我们有其他的div#app之外的元素上:
- 这个时候我们就可以通过teleport来完成;
Teleport是什么呢?
- 它是一个Vue提供的内置组件，类似于react的Portals;
teleport翻译过来是心灵传输、远距离运输的意思;
它有两个属性:
1. to > to:指定将其中的内容移动到的目标元素，可以使用选择器; 2. disabled > disabled:是否禁用 teleport 的功能;
示例代码
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
<style>
#abc{
border: 1px solid orange;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="abc"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
// App.vue
<template>
<div class="app">
<suspense>
<template #default>
<async-home></async-home>
</template>
<template #fallback>
<h2>Loading</h2>
</template>
</suspense>
</div>
</template>
<script setup>
import { defineAsyncComponent } from 'vue';
const AsyncHome = defineAsyncComponent(() => import("./AsyncHome.vue"))
</script>
<style scoped>
</style>感谢大家观看，我们下次再见
欣赏你的照片, 我明白, 世界很美。感谢 旅行灵感。
读起来像小说。继续保持 带来的灵感。
让人精神焕发的 帖子! 我准备订票了。
以后焦虑了或者迷茫了记得回来看看![[[流泪]]](https://www.xvzhu.cn/usr/themes/freewind/static/img/face/emotions/5.gif)
我非常喜欢 出行博客。鼓舞人心查看路线。
你们的博客 百分百 帮助选择路线。坚持!
信息丰富的 出行资源! 越来越棒!
My brother suggested I might like this blog. He was entirely right. This post actually made my day. You cann't imagine just how much time I had spent for this information! Thanks!
我热爱, 写得很实在。你的博客 就是 最好的例子。很出色。
I've learn several good stuff here. Certainly price bookmarking for revisiting. I surprise how so much effort you put to make such a great informative website.