vue3中的Teleport的使用

• 通俗讲就是将我们当前的组件，挂载到app的同级等
• 为什么会有： 如果我们嵌套在 Vue app 内的某个组件内部，那么处理嵌套组件的定位、z-index 和样式就会变得很困难。使用 Teleport 就可以方便的解决组件间 css 层级问题
• 基本的使用

   <Teleport to="body">
      <mark>我是瞬移----</mark>
   </Teleport>

• 效果

  
  image.png

• to : 来指定传送的目标。to 的值可以是一个 CSS 选择器字符串，也可以是一个 DOM 元素对象。

• disabled ： 这个属性，如果为true，那么就不会有效果，就相当于在当前的标签下新加的一个标签，不会跟app同级展示在body下，false就是启用的意思，正常展示在body下

• 效果，disabled为true的情况，false的话就是上面的那张图片

  
  image.png

• 多个teleport可以挂载到同一个元素下

   <Teleport to="body">
        <mark>我是瞬移----A</mark>
    </Teleport>
    <Teleport to="body">
        <mark>我是瞬移----B</mark>
    </Teleport>

• 效果

  
  image.png
• 多个 <Teleport> 组件可以将其内容挂载在同一个目标元素上，而顺序就是简单的顺次追加，后挂载的将排在目标元素下更后面的位置上。