极速上手 VUE 3——teleport传送门组件，前端开发大全

//类名。如：to=“.className”

//id名

1.1、多个 teleport 使用

多个 teleport 传送门组件可以将内容都挂载到一个目标上，多个 teleport 组件内容就是兄弟节点，先挂载的在前面，后挂载的在后面。

使用如下：

第一个挂载元素

第二个挂载元素

运行结果如图：

上边的实例等价于：

第一个挂载元素

第二个挂载元素

二、为什么使用 teleport

---

使用 vue 开发时，都是多个组件之间不断地嵌套，处理元素的样式或者层级的时候就会变得困难。如我们需要添加一个 modal 模态框或 toast 提示框，如果我们把这样的框可以从 vue 组件中剥离出来，我们样式和层级设置起来会更加简便。

有些同学会想，这直接放到 index.html 中不就好了吗？另外 modal 、toast 元素需要使用 vue 组件的状态值，通过状态控制 modal、toast 的隐藏显示。如果直接放入 index.html 则状态控制就复杂了。

所以 teleport 传送门组件就派上用场了。有点像“哆啦A梦”的任意门，可以把元素传