以下是一个简单的例子，演示了如何使用 Teleport：
<template>
<div>
<button @click="toggleDialog">Toggle Dialog</button>
<teleport to="body">
<div v-if="isDialogVisible" class="dialog">
<p>This is a dialog content.</p>
<button @click="closeDialog">Close Dialog</button>
</div>
</teleport>
</div>
</template>
<script>
export default {
data() {
return {
isDialogVisible: false
};
},
methods: {
toggleDialog() {
this.isDialogVisible = !this.isDialogVisible;
},
closeDialog() {
this.isDialogVisible = false;
}
}
};
</script>
<style>
.dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
border: 1px solid #ccc;
}
</style>
在上述例子中，使用 <teleport> 元素将 <div> 中的内容传送到 body 中。这样，即使组件的父元素中没有包含该 <div>，它也能够渲染到页面的顶层 body 元素中。这对于创建全局性的组件，例如模态框或弹出菜单，是非常有用的。
要使用 Teleport，需要在组件中包裹内容的地方使用 <teleport> 元素，并通过 to 属性指定目标 DOM 节点的选择器。在上述例子中，指定了 to="body"，表示将内容渲染到 body 元素中。
Teleport 的引入使得在 Vue 组件中创建更加灵活和强大的全局性组件变得更为容易。
转载请注明出处：http://www.zyzy.cn/article/detail/509/Vue 3.0