Vue teleport to

官网文档写的过于啰嗦。

一句话总结就是： teleport 组件用于包裹html代码或者组件，配合 to 可以指定包裹的内容被渲染到哪个标签之下（使用类似jQuery的选择器指定标签，使用id，class等选择器，不要使用标签选择器）。

teleport, to

如果在父组件parent中使用了teleport包裹子组件child，那么在代码逻辑上child依然是parent的子组件，但是可以指定teleport的to属性为parent之外的位置，这样就改变了child渲染的位置。

在同一个目标上使用teleport，多个teleport可以将内容追加挂载到同一个标签之下

<teleport to="#modals">
    <div>A</div>
</teleport>
<teleport to="#modals">
    <div>B</div>
</teleport>

<!-- result-->
<div id="modals">
    <div>A</div>
    <div>B</div>
</div>

禁用teleport，给teleport添加 disabled 属性，值为Boolean。

ref

1. docs: https://v3.cn.vuejs.org/guide/teleport.html
2. API: https://v3.cn.vuejs.org/api/built-in-components.html#teleport