一、Teleport
1、Teleport的功能
Teleport 是一个内置的组件，它允许你将某个组件或元素的渲染位置“传送”到 DOM 中的其他位置，而不是跟随其父组件的层级进行渲染。
通常情况下，Vue 组件的 DOM 节点会按照其父组件的结构被插入到 DOM 树中。然而，有时我们希望某些元素（比如模态框、通知、悬浮菜单等）出现在页面的不同位置，而不受其父组件的限制。Teleport 就是为了解决这个问题而引入的。传递过去的html代码是独立的，不能插入的原代码中。
2、典型的使用场景
- 模态框（Modal）: 模态框通常需要在页面的根节点上进行渲染，以避免被其他 CSS 样式或布局限制。
- 通知（Notification）: 通知一般出现在页面的顶部或角落，不应受到其父组件位置的限制。
- 浮动元素（Dropdown/Menu）: 这些元素可能需要在视觉上脱离它们的父组件，避免因 overflow 等样式被剪裁。
3、参数介绍
Teleport 的参数
to: 接受一个 CSS 选择器或 DOM 元素，指定要传送到的目标位置。例如：
to="body"：将内容传送到 <body>。
to="#app"：将内容传送到带有 id="app" 的元素中。
disabled: 如果设为 true，则 Teleport 组件会取消传送，内容会在原地渲染。
<teleport to="" :disabled="true">
代码或者是组件
</teleport>
4、实例：
<template>
<div>
<button @click="showModal = true">Open Modal</button>
<!-- 使用 Teleport 将模态框传送到 body 标签内, 可以to 到id,class,元素选择器等等 -->
<teleport to="body">
<!--内部也可以是个组件-->
<div v-if="showModal" class="modal">
<p>This is a modal!</p>
<button @click="showModal = false">Close</button>
</div>
</teleport>
</div>
</template>
<script setup lang="ts">
import {
ref} from 'vue'
const showModal = ref(false)
</script>
<style lang="scss" scoped>
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » Vue学习记录之十 之 Teleport传送组件/keep-alive缓存组件/transition动画组件
发表评论 取消回复