Vue3 说一下刚刚用到的 Teleport 组件(传送门)

454 阅读1分钟

今天做项目的时候,发现样式有可能存在一个层叠关系,导致我的某个组件显示出来的时候会被别的什么东西遮住,这个时候我就需要用到Teleport

用法

  • Teleport的用法,简单来说就像个传送门,可以把需要移动的东西,移动到指定的位置。

  • 首先,用<Teleport></ Teleport>把需要移动的内容包起来

  • 然后在组件内内加上to="xxx",“xxx”即你想传到的地方,比如我项目中的是<Teleport to="body">项目代码</ Teleport>,完成

  • 如图所示,已经移动到了 body 下

image.png

其他用法
vue3.0 传送门teleport
vue实现将某个dom元素或组件挂载到根节点