设计师交流网站产品推广平台排行榜
目录
编辑
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，减缓请求速度，来看效果。
效果如下
3. 总结
<Teleport> 组件允许你将子组件的内容渲染到 DOM 树中的任意位置（如 <body> 标签内），而不局限于其父组件的范围，适用于模态框、提示框等需要脱离当前组件层次结构进行渲染的场景
<Suspense> 组件用于处理异步依赖（如异步组件），在异步组件加载期间显示备用内容，并在组件准备好后切换到实际内容，适用于需要动态加载数据或组件的应用场景。
这两者分别解决了组件渲染位置和异步加载状态管理的问题。
更多内容点击下方链接 ↓ ↓ ↓
Vue3入门到实战_借来一夜星光的博客-CSDN博客