teleport 标签：用于将组件中的 HTML 元素移动到任意的位置。
使用 teleport 标签移动 HTML 元素：
<!-- 将 teleport 中的内容移动到 body 标签中 --> <teleport to="body"> <div> <h3>我是第三层组件的标题</h3> <p>我是第三层组件的内容</p> <p>我是第三层组件的内容</p> <p>我是第三层组件的内容</p> </div> </teleport>
注：teleport 标签也可以通过 id 名移动，例如：`<teleport to="#box">`
使用 teleport 标签制作全局弹窗：
第一层组件：
<template> <div class="one"> <h3>我是One组件（第一层）</h3> <hr /> <Two></Two> </div> </template> <script> import Two from '../components/Two'; export default { name: "One", components: { Two } } </script>
第二层组件：
<template> <div class="two"> <h3>我是Two组件（第二层）</h3> <hr /> <Three></Three> </div> </template> <script> import Three from "../components/Three.vue" export default { name: "Two", components: { Three } } </script>
第三层组件（弹窗组件）：使用 teleport 标签将弹窗内容移动到 body 标签中。
<template> <button @click="isShow = true">显示弹窗</button> <teleport to="body"> <div class="mask" v-if="isShow"> <div class="dialog"> <h3>我是弹窗的标题</h3> <p>我是弹窗的内容</p> <p>我是弹窗的内容</p> <p>我是弹窗的内容</p> <button @click="isShow = false">关闭弹窗</button> </div> </div> </teleport> </template> <script> import { ref } from 'vue' export default { name: "Three", setup() { let isShow = ref(false); return { isShow } } } </script> <style scoped> .mask { width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; display: flex; justify-content: center; align-items: center; } .dialog { width: 300px; padding: 20px; background-color: aqua; text-align: center; } </style>
最终效果：
