文章目录
- 1. Teleport组件的基本用法
- 2. Teleport组件的高级用法
- 2.1. 禁用 Teleport
- 2.2. 多个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>
