vue3 Teleport

在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 的基本用法

posted on 2023-11-10 11:37 Tsunami黄嵩粟阅读(25) 评论(0) 编辑收藏举报