- Teleport:把“渲染出来的 DOM”放到别的地方
理解:组件逻辑还在原位置,但它的 DOM 可以“挂”到 body 或某个容器里(解决弹窗被父容器 overflow: hidden、z-index、层级限制的问题)。
<template>
<button @click="open = true">打开弹窗</button>
<Teleport to="body">
<div v-if="open" class="modal">
弹窗内容
<button @click="open = false">关闭</button>
</div>
</Teleport>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const open = ref(false)
</script>