Vue 3教程 - Teleport

Teleport解决的问题

在默认情况下，Vue中所有组件都会被添加到HTML中的Vue根元素中：

markup

<div id="app"></div>

但是，可以通过Teleport来决定某个组件是挂载在另外一个HTML元素上的：

markup

<div id="app"></div>
<div id="alternative"></div>

在对应的组件中：

markup

<teleport to="#alternative">
  <MyComponent />
</teleport>  

这样，对应的Vue组件就会被挂载到第二个id为alternative的div上。