在Vue.js 3中，Teleport 是一种特殊的组件，用于在 DOM 树中的任何地方渲染其内容，而不受父组件的约束。这对于需要将组件的内容移动到 DOM 树的其他部分时非常有用，例如在模态框或弹出窗口中使用。
Teleport 提供了两个名为 teleport 和 teleport-to 的指令，用于定义内容的来源和目标位置。这使得你可以在组件中定义内容，但在渲染时将其移动到其他地方，而无需考虑父组件的 DOM 结构。
下面是一个简单的例子，演示了如何在Vue.js 3中使用 Teleport：
<template> <div> <button @click="toggleModal">Toggle Modal</button>
<!-- Teleport source: content defined here -->
<teleport to="body">
<div v-if="showModal" class="modal"> <h2>Modal Content</h2> <button @click="toggleModal">Close Modal</button> </div>
</teleport>
</div>
</template>
<script> import { ref } from 'vue';
export default {
data()
{ return
{ showModal: false, }; },
methods:
{
toggleModal() { this.showModal = !this.showModal; },
},
};
</script>
<style> /* Modal styles */ .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; background-color: #fff; border: 1px solid #ccc; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } </style>
在这个例子中，<teleport to="body"> 指示了内容应该被传送到 body 元素下。当点击按钮时，modal 组件的内容将从组件的位置移动到页面的 <body> 元素下，这使得 modal 不受组件层级的限制，可以在页面的任何地方显示。这就是 Teleport 的基本用法