子组件
<template>
<div>
<header>
我是头部
</header>
<footer>
我是末尾
</footer>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="less">
div {
width: 100Vw;
height: 100vh;
header {
width: 100%;
height: 50%;
background-color: pink;
}
footer {
width: 100%;
height: 50%;
background-color: skyblue;
}
}
</style>
父组件
<template>
<div>
<div class="top">我是top</div>
<div class="bottom">我是bottom</div>
// disabled 表示是否传送,true是传送,false是不传送
// to 接收选择器
<Teleport :disabled="true" to="body">
<asyncVue></asyncVue>
</Teleport>
</div>
</template>
<script setup lang="ts">
import asyncVue from './components/asyncVue.vue'
</script>
<style scoped lang="less">
</style>