当前位置：首页 > news >正文

【Vue3 入门到实战】14. telePort 和 Suspense组件

news 2025/8/30 2:50:34

编辑

1. telePort

2. 异步组件Suspense

3. 总结

1. telePort

telePort 允许你将子组件渲染到 DOM 中的任何位置，而不仅仅是在其父组件的范围内。这对于模态框（modals）、提示框（tooltips）和其他需要脱离当前组件层次结构进行渲染的 UI 元素特别有用。

下面举个例子形象化说明一下。

创建一个包含模态框的子组件

Category.vue

<template><div><button @click="showModal = true">显示模态框</button><!-- 使用 Teleport 将内容渲染到 body 标签内 --><Teleport to="body"><div v-if="showModal" class="modal"><p>这是一个模态框</p><button @click="showModal = false">关闭</button></div></Teleport></div>
</template><script setup>
import { ref } from 'vue';const showModal = ref(false);
</script><style scoped>
.modal {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: red;padding: 20px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>

在父组件中引用。并给父组件设置合适的范围。

Father.vue

<template><div class="father"><h2>父组件</h2><Category /></div>
</template>
<script setup>
import Category from './Category.vue';</script><style scoped>
.father{width: 220px;height: 200px;background-color: grey;border:1px solid red;
}
</style>

如下图所示，即使模态框的逻辑和样式都定义在当前组件中，它的实际渲染位置是在整个页面的根节点下，避免了嵌套层级带来的布局问题。

2. Suspense

suspense 是一个用于处理异步依赖（如异步组件）的内置组件。它允许你在等待子组件加载时显示一个备用内容（fallback content），并在子组件准备好后切换到实际的内容。

下面准备一个效果，在子组件中进行异步请求，在父组件中使用Suspense，使子组件在加载时出现 `等待中` 的内容显示。

子组件Child.vue

<template><div>这里是子组件</div></template><script setup>
import axios  from 'axios'let {data:{content}} = await axios.get('https://api.uomg.com/api/rand.qinghua')console.log(content)
</script><style scoped></style>

父组件Father.vue

<template><div><h2>这里是父组件</h2><Suspense><template #default><Child/></template><template #fallback><div>加载中...</div></template></Suspense></div>
</template><script setup>
import { Suspense } from 'vue'; 
import Child from './Child.vue'</script>

在控制台将网速调至3G，减缓请求速度，来看效果。