介绍
<Teleport> 是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。
使用场景
这类场景最常见的例子就是全屏的模态框。理想情况下，我们希望触发模态框的按钮和模态框本身是在同一个组件中，因为它们都与组件的开关状态有关。但这意味着该模态框将与按钮一起渲染在应用 DOM 结构里很深的地方。这会导致该模态框的 CSS 布局代码很难写。
示例
外层
<body> <div id="app"></div> //等会将会传送到这里哈 <div id="myapp"></div> </body>传送组件
<template> <div> <a-button type="primary" @click="openHander">open</a-button> <!-- 将内容区域的代码移动到id=myapp下 --> <teleport to='#myapp'> <div class="mask" v-if="showFlag"> <h1>对话框组件</h1> <div> 我是内容哈哈 </div> <a-button @click="openHander">关闭</a-button> </div> </teleport> </div> </template> <script> import { ref } from '@vue/reactivity' export default { setup () { let showFlag=ref(false) const openHander=()=>{ showFlag.value=!showFlag.value } return {showFlag,openHander} } } </script>
在自己使用上比较常见的是弹窗组件，可以直接挂载到最外层进行弹窗。