vue3从精通到入门16：内置组件之Teleport

vue3中的Teleport是一个特别强大的特性，它允许开发者将组件的子组件“传送”到DOM中的任意位置，而不仅仅是它们的直接父级内部。这种灵活性在处理需要从视觉上从原始位置移动到其他位置的用户界面元素时显得尤为有用，比如模态框、弹出菜单、提示框等。

基础用法

<teleport> 的基本用法很简单：

• 在模板中，使用 <teleport> 标签包裹你想要“传送”的模板内容。
• 使用 to 属性指定一个选择器或 DOM 元素，作为内容应该被渲染到的目标位置。

假设我们有一个简单的组件，它包含一个按钮，当点击这个按钮时，我们想要在页面的某个特定位置显示一个消息。

<template>  
  <div>  
    <button @click="showMessage = true">显示消息</button>  
    <teleport to="#messages">  
      <div v-if="showMessage" class="message">Hello from Teleport!</div>  
    </teleport>  
  </div>  
</template>  
  
<script setup>  
import { ref } from 'vue';  
 
const showMessage = ref(false);  

</script>  
  
<style>  
.message {  
  border: 1px solid #000;  
  padding: 10px;  
  margin-bottom: 10px;  
}  
</style>

在上面的例子中，我们定义了一个 showMessage 的响应式引用，它控制消息的显示和隐藏。当按钮被点击时，showMessage 变为 true，这会使得 <div class="message"> 被渲染出来。

关键的部分是 <teleport to="#messages">。这告诉 Vue 我们想要将 <div class="message"> 渲染到 ID 为 messages 的 DOM 元素内部。因此，我们需要在页面的某个地方有一个这样的元素：

<div id="messages"></div>

当 showMessage 为 true 时，<div class="message"> 不会被渲染在原始的组件位置，而是会被“传送”到 <div id="messages"></div> 内部。

使用场景

通过以上的例子，我们已经知道teleport 使用的方法，心中也对其的使用场景有了大概了解，接下来我们再详细说一下这个使用场景。

假设我们正在开发一个具有全局通知功能的Web应用。当用户执行某些操作时，我们希望在页面的某个固定位置显示一个通知消息。

不使用<teleport>

如果我们不使用<teleport>，我们可能需要在每个需要显示通知的组件内部都定义一个通知容器，并将其位置通过CSS固定在页面的某个角落。这样做不仅代码冗余，而且当通知数量增多时，管理起来也会变得复杂。

使用<teleport>

使用<teleport>，我们可以将通知组件的内容渲染到页面上的一个统一位置，无论通知是从哪个组件触发的。

首先，我们定义一个全局的通知容器，通常放在页面的根节点或某个固定位置：

<div id="global-notifications"></div>

接着，我们创建通知组件，并使用<teleport>将其渲染到全局通知容器中：

<template>  
  <teleport to="#global-notifications">  
    <div class="notification" v-if="showNotification">  
      {{ notificationText }}  
    </div>  
  </teleport>  
</template>  
  
<script setup>  
import { ref } from 'vue';  
const showNotification = ref(false);
const notificationText = ref('');  
// 假设有一个方法来触发通知  
const triggerNotification = (text) => {  
   notificationText.value = text;  
   showNotification.value = true;  
   // 在一段时间后隐藏通知  
   setTimeout(() => {  
      showNotification.value = false;  
   }, 3000);  
};  
    
</script>

通过<teleport to="#global-notifications">，我们将通知组件的内容渲染到了ID为global-notifications的DOM元素中。这意味着无论通知组件在哪里被触发，它的内容都会被“传送”到全局通知容器中显示。