在 Vue 中，Teleport是一个特殊的内建元件，从Vue 3开始引入。元件的逻辑关联性。

这对于一些需要特定 DOM 结构的功能（如模态框、通知、工具提示等）非常有用，因为这些内容通常需要被渲染到body或其他全局容器中。

Teleport的语法

<template>
<div>
<h1>主内容</h1>
<teleport to="body">
<div class="modal">
<p>这是一个模态框</p>
</div>
</teleport>
</div>
</template>

<div class="modal">

虽然写在元件内部，但会被「传送」到元素body中。

Teleport 的属性

  • to(简单)：指定 DOM 节点的选择器或 DOM 元素，表示 Teleport 的目标位置。

    • 值可以是：

    • CSS 选择器字串（如body, #app）
    • DOM 元素（如document.querySelector(\'#app\')）
  • disabled（选择性）：如果设定为位置true，底部取消 Teleport 的效果，内容将渲染在原始位置。

    • 使用范例

  • 模态框

    • <template>
    <div>
    <button @click="showModal = true">开启模态框</button>
    <teleport to="body">
    <div v-if="showModal" class="modal">
    <p>这是一个模态框</p>
    <button @click="showModal = false">关闭</button>
    </div>
    </teleport>
    </div>
    </template>

    <script>
    export default {
    data() {
    return {
    showModal: false,
    };
    },
    };
    </script>

    <style>
    .modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border: 1px solid black;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    </style>

    在这个例子中，模态框的 DOM 结构被移动到了body下，但它的行为仍然与元件绑定，响应性完全保留。

  • 禁用 Teleport当 disabled 属性为 true 时，内容不会被移动。

    • <template>
    <div>
    <teleport to="body" :disabled="true">
    <div>这段内容不会被传送</div>
    </teleport>
    </div>
    </template>

    使用场景

  • 模态框（Modal）
  • 通知（Notification）
  • 工具提示（Tooltip）
  • 全域性的浮动元素
  • 将内容移动到特定的容器内

    • 注意事项

  • 目标元素的存在：to 指定的 DOM 节点必须存在，否则 Teleport 不会生效。
  • SEO 考量：内容虽然被移动，但仍然在原位置的模板内定义，对于搜索引擎友好。
  • 样式作用域：如果使用了 scoped 样式，样式仍然会应用到 Teleport 的内容。

    • 总结

    Teleport 提供了一种方便的方法将 DOM 节点移动到其他位置，适用于需要全域渲染但仍然需要保留组件逻辑关联的场景。在 Vue 3 中，它是一个非常实用且灵活的工具，可以让我们更好地管理应用的结构和样式。