在组件化开发中，我们封装一个组件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>感谢大家观看，我们下次再见
文章不错支持一下，非常喜欢
文章不错非常喜欢，支持一下
马克吐温的作品就很经典，小时候很爱看
文章不错支持一下，非常喜欢
文章不错非常喜欢，支持
文章不错非常喜欢，支持
[...]回顾如何定义作用域链如何定义'作用域'？说明不同类型的作用域作用域链Scope Chain是JavaScript中的一个基本概念，它属于确定当前执行代码的上下文变量的查找和访问机制。在作用域的构建基于词法作用域的解构，即变量和函数的可见性由它们在源代码中的位置决定。在JavaScript中，每个执行上下文如函数执行上下文都绑有一个与之关联的作用域链。这个作用域就是一个包含多个环境记录Environ[...]
哈喽，你的SSL好像过期喽
@秋风于渭水 确实![[[微笑]]](https://www.xvzhu.cn/usr/themes/freewind/static/img/face/emotions/0.gif)
[...]不同的浏览器存在兼容性问题的核心原因是不同的浏览器可能使用的是不同的浏览器内核。在现代化开发中，大多数的浏览器兼容性问题是可以通过工程化中的配置选项来解决的。1.比如browserslist可以配置目标的浏览器或者Node环境，然后在不同的工具中起作用，比如autoprefixer/babel/postess preset env等，在进行了正确的配置后，开发的Vue或者React项目在进行打包时[...]