Vue3新特性——Teleport传送门

把组件的Dom元素传送到其他位置展示。

使用情况举例：
有时候我们在一个组件中点击按钮，想要跳出一个蒙层把整个屏幕都遮盖住。
在之前的项目中我试过这种蒙层，但是用的是具体数值，这样在适应性上可能就比较low了。如果使用以下代码就能实现完美适应屏幕大小了。

{
  top:0;
  right:0;
  buttom:0;
  left:0;
}

但是这个时候根据子绝父相就会出现问题，如果我们的这个组件也是采用定位（absolute、relative、fixed）了呢？这个蒙层就只能覆盖这个组件了。

这个时候就要使用这个新特性Teleport传送门了。
通过teleport标签可以将里面包裹的元素或者组件挂载到别的Dom元素上（原本元素上就没有他了，但是可以触发事件）。像上面这种例子，使用 to = ‘body’ 就能解决问题

<teleport to = 'xxx'>
  <div>111</div>
</teleport>