Vue3中的Teleport组件持哪些传送目标？

Vue3中的Teleport组件是一种强大的特性，它允许我们将子组件放置在DOM树中的任何位置，而不受父组件的限制。在Vue3中，Teleport组件支持以下传送目标：

1. 父组件中指定的目标：
   在某些情况下，我们希望将Teleport组件的内容传送到与父组件相同的位置。这个目标是父组件的位置，使得Teleport组件的内容可以和父组件的其他内容并列显示，而不是被移动到不同的DOM位置。

示例代码如下：

<template>
  <div>
    <h1>Teleport Component Example</h1>
    <teleport to="parent-target">
      <p>This content will be teleported to the parent's target</p>
    </teleport>
  </div>
</template>

2. 指定具体的DOM元素作为目标：
   除了将内容传送到父组件的位置外，我们还可以指定一个具体的DOM元素作为Teleport组件的传送目标。这样一来，Teleport组件的内容将会被移动到指定DOM元素的位置，从而实现更灵活的布局控制。

示例代码如下：

<template>
  <div>
    <h1>Teleport Component Example</h1>
    <teleport to="#specific-target">
      <p>This content will be teleported to the specified target element</p>
    </teleport>
    <div id="specific-target"></div>
  </div>
</template>

3. 使用Teleport组件实现模态框：
   一个常见的使用场景是将Teleport组件与模态框结合起来，这样我们可以实现一个灵活方便的弹窗组件。在这种情况下，传送目标通常是body元素，以确保模态框可以覆盖整个页面内容。

示例代码如下：

<template>
  <div>
    <h1>Teleport Component Example</h1>
    <button @click="showModal = true">Show Modal</button>
    <teleport to="body" v-if="showModal">
      <div class="modal">
        <p>This is a modal dialog</p>
        <button @click="showModal = false">Close</button>
      </div>
    </teleport>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    };
  }
};
</script>

<style>
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
</style>

这些只是Teleport组件的一些常见应用场景，你可以根据实际需求灵活运用Teleport组件，为你的Vue3应用增加更多的灵活性和可扩展性。