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>

 最终效果：

原创作者：吴小糖

创作时间：2023.11.21