Teleport是瞬移组件,也称为传送门组件
它是一个可以使元素从一个组件转到另一个组件的组件。
如对话框、自定义菜单、警告提示、徽章,以及许多其他需要出现在特殊位置的自定义UI组件。假设现在页面中有两个元素,分别为div元素和button按钮元素,在当前页面中这两个元素是并列元素,
<template>
<div class="target-portal">div 元素</div><button>按钮</button></template>
但如果想要将button按钮元素放置于div这一目标元素下,则可以直接利用Teleport组件,将button按钮元素内容瞬间移动至目标元素下。例如,设置to属性为“.target-portal”,那么button按钮元素就成了div元素的嵌套子元素,它们不再是并列关系,而是嵌套结构,
<template>
<div class="target-portal">div元素</div><Teleport to=".target-portal">
<button>按钮</button>
</Teleport>
</template>