Vue.js 使用 `teleport` 实现全局挂载

今天我们来聊聊 Vue 3 中的一个实用功能：<Teleport> 组件。如果你曾在项目中需要将组件的部分内容渲染到全局位置，比如将模态框、通知等元素挂载到 body 下，那么 <Teleport> 将是你的好帮手。

什么是 <Teleport>？

<Teleport> 是 Vue 3 引入的内置组件，它允许你将组件的一部分模板“传送”到 DOM 中的指定位置。这在处理全局挂载需求时尤为方便。

为什么需要 <Teleport>？

在开发中，我们经常遇到需要将某些元素（如模态框、通知、工具提示等）渲染到应用根元素之外的位置，以避免受限于父级的样式或布局。传统上，我们可能会通过操作 DOM 或使用全局状态管理来实现，但这些方法可能复杂且容易出错。<Teleport> 提供了一个简洁、声明式的解决方案。

如何使用 <Teleport>？

使用 <Teleport> 非常简单。你只需在模板中使用 <Teleport> 标签，并通过 to 属性指定目标容器的选择器或 DOM 元素。

示例：

<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>
import { ref } from 'vue';export default {setup() {const showModal = ref(false);return { showModal };},
};
</script><style>
.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>

在这个示例中，当点击“打开模态框”按钮时，showModal 状态变为 true，模态框内容被渲染到 body 下，而不是组件的 DOM 结构内。

注意事项：

目标容器存在性：确保 <Teleport> 的目标容器在 DOM 中存在。如果目标容器是由 Vue 渲染的，需要确保它在 <Teleport> 挂载之前已被渲染。
逻辑关系：<Teleport> 仅改变渲染的 DOM 位置，不影响组件间的逻辑关系。传递的 props 和事件仍然按预期工作。
禁用 Teleport：在某些情况下，你可能希望根据条件禁用 <Teleport>。可以通过传递 disabled 属性来实现：
```
<Teleport :to="isMobile ? null : 'body'" :disabled="isMobile">
</Teleport>
```
在这个示例中，如果 isMobile 为 true，<Teleport> 将被禁用，内容将按原位渲染。