解锁 Vue 3 Teleport 的魔力

本文主要是介绍解锁 Vue 3 Teleport 的魔力，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

偶然遇到一个场景，在项目开发中蒙层是很常见的一个组件，我们期望它会在 body 下显示，但有时候代码逻辑结构很合理，组件结构不是很合理，也就是说蒙层组件不在 body 下，比如说：

蒙层组件

<template><div class="model"><slot></slot></div>
</template><style scoped>
.model {display: flex;justify-content: center;align-items: center;flex-direction: column;position: fixed;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.3);left: 0;top: 0;
}
</style>

MyComponent

<template><div class="block"><h2>区域1</h2><button @click="modelVisible = true" class="btn">打开朦层</button><Model v-if="modelVisible"><h2>区域2</h2><button @click="modelVisible = false" class="btn">关闭蒙层</button></Model></div>
</template><script>
import Model from './Model.vue'
export default {components: {Model},data() {return {modelVisible: false}}
}
</script>

效果为：

到目前为止，一切都很合理，但是当我们在网页上查看代码结构时，会发现：

蒙层组件在 class 为 block 的 div 下，虽然不影响代码逻辑，但我们希望蒙层组件的位置在 body 下。

在 Vue 2 中，组件结构就是最后真实 DOM 元素的结构，不能发生改变。

但 Vue 3 中有一个内置组件 --- Teleport 可以实现我们想要的结构。

<template><div class="block"><h2>区域1</h2><button @click="modelVisible = true" class="btn">打开朦层</button><Teleport to="body"><Model v-if="modelVisible"><h2>区域2</h2><button @click="modelVisible = false" class="btn">关闭蒙层</button></Model></Teleport></div>
</template>

逻辑结构不发生任何变化，只是加了 Teleport 组件包裹起来，自此如愿实现。

下面对 Teleport 进行简单的介绍。

1. Teleport 概述

在 Vue 3 中，Teleport 是一个用于将组件的渲染内容移动到 DOM 结构的其他部分的内置组件。

它允许在不打乱组件层级的情况下，将某些元素（如模态框、通知、悬浮菜单等）渲染到指定的DOM 位置。对于实现全局性的 UI 组件非常有用，比如将模态框渲染到 body 标签下，而不是它的父组件内部。

2. 常见的使用场景

1、模态框

模态框通常需要显示在页面的最顶层，覆盖整个页面的内容，而不是受限于父组件的布局。

2、通知类组件

这类组件往往显示在页面的某个固定位置，例如在右上角显示一条通知。

3、悬浮菜单

弹出菜单或工具提示，通常需要再指定的 DOM 元素旁边显示，而不依赖父组件。

3. 基本语法

非常简单，只需要指定一个目标 DOM 位置，然后将内容包裹在 Teleport 组件中即可。

1、简单使用，举个 🌰

<template><div class="container"><h1>这是一个普通的内容</h1><Teleport to="body"><div class="modal"><p>这是一个被 Teleport 移动的模态框内容</p></div></Teleport></div>
</template><style scoped>
.container {padding: 10px;border: 2px solid pink;
}
.modal {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background: white;padding: 20px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
</style>

这段代码中，Teleport 的 to 属性指向 body，表示将包裹的 div 内容直接移动到 body 标签内部。这样，即使 Teleport 被放在组件树的深处，它的内容也会在页面的最顶部显示。

2、Teleport 的 to 属性

to 属性可以是任意的 CSS 选择器，也可以是一个有效的 DOM 节点。

- to="body"：内容将被移动到 body 标签内部。

- to="#app"：内容将被移动到 id 为 app 的 DOM 元素内部。

3、Teleport 的 disabled 属性

disabled 属性，如果设置为 true，则 Teleport 不会进行任何传送，内容将按正常的组件层级进行渲染。

<template><div class="container"><Teleport to="body" disabled="false"><div class="tooltip">这是一个可选禁用的传送内容</div></Teleport></div>
</template><style>
.container {border: 1px solid pink;padding: 10px;
}
</style>