Vue 3 的 Teleport：探索组件传送的奥秘

2023-10-27 20:22:04

Vue 3 的 Teleport：穿梭时空的传送门

在 Vue 3 中，引入了一个令人兴奋的新特性：Teleport。它就像一个传送门，可以将组件从一个 DOM 节点移动到另一个 DOM 节点，而无需重新渲染。

Teleport 的魔力

Teleport 通过使用一个名为 <Teleport> 的组件来实现其传送能力。<Teleport> 组件有以下几个属性：

to: 传送目标的位置（DOM 节点）
mode: 指定传送模式（appendChild 或 insertBefore）
disabled: 是否禁用 Teleport（默认情况下为 false）

例如，以下代码将 <MyComponent> 组件从 <div id="app"> 传送到 <div id="target">：

<template>
  <Teleport to="#target">
    <MyComponent />
  </Teleport>
</template>

当 Vue 遇到 <Teleport> 组件时，它会将 <MyComponent> 移动到指定的目标位置。这不会导致重新渲染，因为组件本身没有改变。

Teleport 的应用场景

Teleport 在以下场景中特别有用：

弹出对话框和模态框： 将弹出窗口移动到身体元素（<body>）中，以获得更好的可访问性和样式控制。
固定的元素： 创建始终可见于屏幕顶部或底部的固定元素，例如页眉或页脚。
远程加载的组件： 将组件动态加载到特定位置，而不会干扰现有 DOM。

实例：使用 Teleport 创建一个浮动菜单

为了展示 Teleport 的强大功能，让我们创建一个浮动菜单，它可以根据鼠标位置显示在页面上。

<template>
  <div>
    <Teleport :to="targetElement">
      <div class="floating-menu">
        <!-- 菜单内容 -->
      </div>
    </Teleport>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    const targetElement = ref(null)
    const showMenu = (event) => { targetElement.value = event.target }
    const hideMenu = () => { targetElement.value = null }
    onMounted(() => document.addEventListener('contextmenu', showMenu))
    onUnmounted(() => document.removeEventListener('contextmenu', showMenu))
    return { targetElement, hideMenu }
  }
}
</script>