Vue 3中的Teleport：超越组件边界的渲染-CSDN博客

本文链接：https://blog.csdn.net/weixin_46112225/article/details/146508702

Vue 3引入了许多新特性，其中之一便是Teleport。它为开发者提供了一种强有力的方式来控制组件的渲染位置，使得我们可以将组件的内容“传送”到DOM树的任何地方，而不仅仅局限于其父级组件的边界内。这在创建模态框、通知系统或任何需要脱离当前布局层次结构的应用场景中特别有用。

什么是Teleport？

Teleport（以前称为Portal）允许你指定一个Vue组件应该在哪里被挂载到DOM中。通过to属性，你可以定义一个CSS选择器字符串或者一个直接的DOM元素作为目标挂载点。这意味着即使你的Vue组件嵌套得很深，它的内容也可以显示在页面上的任意位置。

基本使用

假设我们有一个简单的模态框组件，希望它能独立于其他布局元素进行渲染：

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

<script>
import { ref } from 'vue';

export default {
  setup() {
    const showModal = ref(false);
    return { showModal };
  }
}
</script>

<style scoped>
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0,0,0,.1);
}
</style>

在这个例子中，尽管按钮和模态框逻辑上是相关的，但模态框实际上是在<body>标签内部渲染的，而不是作为按钮的子元素。这样做的好处是可以避免样式冲突，并确保模态框正确地覆盖整个页面。