vue teleport 跳出容器

传送，将组件的 DOM 元素挂载在任意指定的一个 DOM 元素，

一个典型的例子，我们在组件调用了 Modal 弹框组件，我们希望的弹框是这样子的，绝对居中，层级最高，如：

 

 但是如果在父组件 Home 有类似这样的样式，如 transform 

 

就会影响到 Modal 的位置，即使 Modal 用了 position:fixed 来定位

 

 

 这就是为什么我们需要用 Teleport 组件来帮助我们 “跳出” 容器，避免受到父组件的一些约束控制，把组件的 DOM 元素挂载到 body 下，如：

 

 

 注意：即使 Modal 跳出了容器，也保持 “父子组件关系”，只是 DOM 元素的位置被移动了而已

总结就是被teleport包着的代码被放到指定位置下，代码样式不受我当前代码放的位置的父样式影响