小程序开发|小程序制作|小程序开发网 › 小程序开发 ›小程序开发经验 › 查看内容

介绍一个vue3的新功能 Teleport

2022-6-22 19:49| 发布者: 快乐的鱼| 查看: 217| 评论: 0

摘要: Teleport 翻译来叫传送具体有什么用呢，我用一个小例子来说明在我们的项目中，经常会用到全局的 dialog当我们在组件中添加dialog的时候会添加到组件内的节点上，而组件内的顶层节点又是父级组件的子组件，父级组件

Teleport 翻译来叫传送
具体有什么用呢，我用一个小例子来说明
在我们的项目中，经常会用到全局的 dialog

当我们在组件中添加dialog的时候会添加到组件内的节点上，而组件内的顶层节点又是父级组件的子组件，
父级组件又在顶层组件之下，顶层组件呢，又挂载在顶层的DOM节点上，就导致层级特别的深。
被包裹在其他组件之中，容易被干扰
样式也在组件中，容易变得混乱

而在用户感知的角度下呢？
dialog看起来是在最顶层显示在屏幕中心的

所以我们可以这样来做

将dialog渲染在顶层的另外一个DOM节点上去，这样将它独立起来，这时候我们就可以用到今天的主角 Teleport ！
非常的简单，我们使用标签将dialog组件的DOM结构包裹，然后在上有一个to属性，
它指我们要将teleport渲染到哪个DOM节点上去，如下图我要将此dialog组件渲染到id位modal的节点上去。