Teleport vue3新特性

其最主要的功能便是，将组件渲染到指定的DOM节点中，而无需关心组件在组件树中的位置。

使用场景列举

<template>
  <div>
    ...
    <div>
      ...
      <!-- 此处 是使用header标签，封装的组件 -->
      <header></header>
    </div>
    ...
    <!-- 假设此处div封装的蒙层组件 -->
    <div></div>
  </div>
</template>

注意：

• 1.header标签设置的position: sticky;，在页面滚动时，会固定在顶部。但是这个属性会受父级元素position影响。
• 2.其父元素设置了z-index会影响其后代子元素的位置，当父元素比子元素大，也不会超过并覆盖父元素。

解决方案

• 温馨提示：当天组件并非一定是页面，很有可能会是组件之下的组件，所以这个时候这个新特性就十分重要，可以避免很多麻烦的事情。

<template>
  <div>
    ...
    <div>
      ...
      <!-- 此处 是使用header标签，封装的组件  将其dom节点在传送至body标签子节点，并不会受到源父元素的css影响-->
      <Teleport to="body">
        <header></header>
      </Teleport>
    </div>
    ...
    <Teleport to="body">
      <!-- 假设此处div封装的蒙层组件 -->
      <div></div>
    </Teleport>
  </div>
</template>

Teleport 的属性配置

interface TeleportProps {
  /**
   * 必填项。指定目标容器。
   * 可以是选择器或实际元素。
   */
  to: string | HTMLElement;
  /**
   * 当值为 `true` 时，内容将保留在其原始位置
   * 而不是移动到目标容器中。
   * 可以动态更改。
   */
  disabled?: boolean;
  /**
   * 当值为 `true` 时，Teleport 将推迟
   * 直到应用的其他部分挂载后
   * 再解析其目标。(3.5+)
   */
  defer?: boolean;
}

此处总结

• 无言多说，只有你遇到组件不断嵌套很多的时候，你才会发现这个新特性是多么的实用。
• 尤其是css，打架干扰，这个新特性，可以让你省去很多麻烦。
• 不用再去，自己一个一个定义什么节点插入奇奇怪怪的操作。