Vue3内置组件Teleport

一.Teleport的介绍

Teleport是Vue 3.0 新增的一个内置组件，主要是为了解决一些特殊场景下模态对话框组件、组件的渲染。

Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术。

如果我们嵌套在 Vue app 内的某个组件内部，那么处理嵌套组件的定位、z-index 和样式就会变得很困难。使用 Teleport 就可以方便的解决组件间 css 层级问题。

二.Teleport用法

用法非常简单，只需要使用 to 这个属性就可以把组件渲染到想要的位置

// 渲染到body标签下

"body">

  

"modal">

    I'm a teleported modal!

  

也可以使用

"#some-id" />

".some-class" />

"[data-teleport]" />

必须是有效的查询选择器或 HTMLElement。

三.场景使用

在一些场景中，比如使用modal时，我们想要将modal放在具体的vue页面中，功能与位置保持一致。但是在展示时，又希望直接将它放在body下，方便实现定位样式。面对功能位置与样式位置的不统一，vue3中提供一对标签用于移动dom的位置到指定元素。

下面情况是没加teleport的时候

 teleport to="body"的情况

代码如下：

子组件moadl