是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。

1，使用场景：

一个组件模板的一部分在逻辑上从属于该组件，但从整个应用视图的角度来看，它在 DOM 中应该被渲染在整个 Vue 应用外部的其他地方；

也就是说我有一个全屏的弹出框（模态框）或 Toast 轻提示 组件，可能会在多个组件中使用到，但是由于节点嵌套的太深，我想把它的dom元素放在最外层的容器上面；通过组件传参控制它的显示于隐藏；

这样做的好处是：处理嵌套组件的定位、z-index 和样式就会变得简单；不会造成样式污染；

而且管理起来反而会方便容易很多；

2，搭配组件使用

只改变了渲染的 DOM 结构，它不会影响组件间的逻辑关系。也就是说，如果 包含了一个组件，那么该组件始终和这个使用了 的组件保持逻辑上的父子关系。传入的 props 和触发的事件也会照常工作。

这也意味着来自父组件的注入也会按预期工作，子组件将在 Vue Devtools 中嵌套在父级组件下面，而不是放在实际内容移动到的地方。

效果图如下：

点击按钮弹出模态框，点击OK关闭模态框，且渲染的节点位置是在 body（或任意节点）下面的；

实现如下

父组件：

子组件Modal.vue：

3，to属性的使用

接收一个 to prop 来指定传送的目标。to 的值可以是一个 CSS 选择器字符串（如：to=".container"、to="#container），也可以是一个 DOM 元素对象(如：to="body")。

这段代码的作用就是告诉 Vue把以下模板片段传送到 你所期望的标签下面。

4，禁用 Teleport

在某些场景下可能需要视情况禁用 ，需要添加disabled为false即可；

那么此时这个组件就相当于普通的弹窗组件，不再进行移动了；

5，多个 Teleport 共享目标

一个可重用的模态框组件可能同时存在多个实例。对于此类场景，多个 组件可以将其内容挂载在同一个目标元素上，而顺序就是简单的顺次追加，后挂载的将排在目标元素下更后面的位置上。

比如下面这样的用例：

A

B

渲染的结果为：

html

  
A
  
B