Vue 3 第十六章：组件五（内置组件-teleport）

1. Teleport组件的基本用法

<teleport>组件用于将组件的内容插入到指定的DOM元素中，而不是插入到组件自身的位置。例如，当我们需要在一个弹出窗口中渲染一个组件时，可以使用to属性指定要插入到的DOM元素的选择器（ID选择器、类选择器、标签选择器等等）。基本用法如下：

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <teleport to="body">
      <div v-if="show" class="modal">
        <h2>{
   
   { title }}</h2>
        <p>{
   
   { content }}</p>
      </div>
    </teleport>
  </div>
</template>

<script setup lang="ts">
import {
      
       ref } from 'vue';

const show = ref(false)
const title = ref('Hello, World!')
const content = ref('This is a modal window.')

</script>

<style scoped>
.modal {
      
      
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 1rem;
  border: 1px solid black;
}
</style>

在上面的代码中，我们使用<teleport>组件将一个<div>元素插入到body元素中。当我们点击Toggle按钮时，<div>元素会显示一个名为modal的样式，并在页面中居中显示。

2. Teleport组件的高级用法

2.1. 禁用 Teleport

在某些场景下可能需要视情况禁用 <Teleport>。我们可以通过对<Teleport>动态地传入一个disabledprop 来处理这两种不同情况。

  <Teleport to="#modal" :disabled="!showModal">
    <Modal v-if="showModal" @close="showModal = false" />
  </Teleport>

在上面的代码中，我们使用disabled属性来禁用了Teleport组件的插入和移除操作。具体来说，当showModal为false时，Teleport组件会被禁用，这样就可以防止Modal组件被插入到指定的DOM元素中。

2.2. 多个Teleport组件共享目标元素

一个可重用的模态框组件可能同时存在多个实例。对于此类场景，多个<Teleport>组件可以将其内容挂载在同一个目标元素上，而顺序就是简单的顺次追加，后挂载的将排在目标元素下更后面的位置上。

比如下面这样的用例：

<Teleport to="#modals">
  <div>A</div>
</Teleport>
<Teleport to="#modals">
  <div>B</div>
</Teleport>

渲染的结果为：

<div id="modals">
  <div>A</div>
  <div>B</div>
</div>