vue的teleport

vue的teleport

关于官网的介绍官网解释
例子&＃xff1a;
子组件

圆的css样式

此时页面效果

在父组件中&＃xff08;因为home这个div设置absolute所以组件中的圆是以home这个div作为参考&＃xff0c;但是我们想要这个圆以body为父级元素进行参考&＃xff0c;此时我们就可以使用teleport&＃xff09;

改造子组件&＃xff0c;添加teleport,to代表以谁为父级

改造之后的效果

此时圆浮动就是以body为父级进行参考的

与vue components一起使用

官网例子

在同一目标上使用多个teleport

<teleport to&＃61;"#modals"><div>A</div>
</teleport>
<teleport to&＃61;"#modals"><div>B</div>
</teleport><!-- result-->
<div id&＃61;"modals"><div>A</div><div>B</div>
</div>