把组件的Dom元素传送到其他位置展示。
使用情况举例:
有时候我们在一个组件中点击按钮,想要跳出一个蒙层把整个屏幕都遮盖住。
在之前的项目中我试过这种蒙层,但是用的是具体数值,这样在适应性上可能就比较low了。如果使用以下代码就能实现完美适应屏幕大小了。
{
top:0;
right:0;
buttom:0;
left:0;
}
但是这个时候根据子绝父相就会出现问题,如果我们的这个组件也是采用定位(absolute、relative、fixed)了呢?这个蒙层就只能覆盖这个组件了。
这个时候就要使用这个新特性Teleport传送门了。
通过teleport标签可以将里面包裹的元素或者组件挂载到别的Dom元素上(原本元素上就没有他了,但是可以触发事件)。像上面这种例子,使用 to = ‘body’ 就能解决问题
<teleport to = 'xxx'>
<div>111</div>
</teleport>