Vue3 -- 新组件【谁学谁真香系列6】

Teleport

Teleport是什么？–Teleport是一种能够将我们的组件html结构移动到指定位置的技术。
父组件：

<template><div calss="outer"><h2>我是App组件</h2><img src="https://z1.ax1x.com/2023/11/19/piNxLo4.jpg" alt=""><br><Modal /></div>
</template><script lang="ts" setup name="App">
import { ref } from "vue"
import Modal from "./Modal.vue";</script><style lang="less">
.outer {background-color: #ddd;border-radius: 10px;padding: 10px;width: 400px;height: 400px;// 滤镜 saturate--饱和度filter:saturate(200%)
}img {width: 270px;
}button {margin: 3px 5px;
}
</style>

注意看父组件中.outer的 filter:saturate(200%)，这个样式会让子组件中的fixed定位基于自己的父组件，而不是按照我们的预期根据整个视口定位。
这时候我们就需要在子组件中使用Teleport了，将我们需要按照整个视口定位的内容用<teleport to=""> </teleport> 包裹起来就可以实现预期。

<!-- 这里的to里面可以写选择器字符串，例如'#app'、'.demo'、'body' --><teleport to="body"><div class="modal" v-show="isShow"><h2>我是弹窗的标题</h2><p>我是弹窗的内容</p><button @click="isShow = false">关闭弹窗</button></div></teleport>

整个子组件代码：

<template><button @click="isShow = true">展示弹窗</button><!-- 这里的to里面可以写选择器字符串，例如'#app'、'.demo'、'body' --><teleport to="body"><div class="modal" v-show