在一些场景中，比如使用modal时，我们想要将modal放在具体的vue页面中，功能与位置保持一致。但是在展示时，又希望直接将它放在body下，方便实现定位样式。面对功能位置与样式位置的不统一，vue3中提供一对<teleport ></teleport>标签用于移动dom的位置到指定元素。
modal组件：
<template>
<div class='modal'>
<p>这是一个模态框</p>
<button>关闭</button>
</div>
</template>
<script>
export default {
name: 'modal',
};
</script>
<style lang='scss' scoped>
.modal{
position: absolute;
left: 40%;
top: 40%;
width: 100px;
height: 100px;
border: 1px skyblue solid;
}
</style>
父组件：
<template>
<div class='test'>
<p>这是父页面</p>
<modal/>
</div>
</template>
<script>
import modal from './modal';
import { defineComponent, ref} from 'vue';
export default defineComponent({
name: 'test',
components: {
modal
},
});
</script>
<style lang='scss' scoped>
.test {
position: absolute;
left: 100px;
top: 100px;
width: 200px;
border: 1px solid #000;
color: #00EAFF;
}
</style>
此时dom结构为：
image.png
如果我们嵌套teleport标签，标签上的to参数表示要将包裹的内容所移动到的父级元素。父组件变为：
<template>
<div class='test'>
<p>这是父页面</p>
<teleport to='body'>
<modal/>
</teleport>
</div>
</template>
dom结构变为：
image.png
