欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 教育 > 高考 > Vue.js 中<teleport> 组件,<Suspense> 组件

Vue.js 中<teleport> 组件,<Suspense> 组件

2025/5/2 6:28:48 来源:https://blog.csdn.net/2301_79568779/article/details/142788618  浏览:    关键词:Vue.js 中<teleport> 组件,<Suspense> 组件

 一、<teleport> 组件     

在 Vue.js 中,<teleport> 是一个非常强大的内置组件,用于将子组件或元素“传送”到 DOM 中的不同位置,而不仅限于它们在父组件中的结构。这可以帮助解决许多布局和样式方面的问题,尤其是在模态框、工具提示、下拉菜单等情况下。

 1.使用场景

a.模态框:将模态框元素放在 <body> 中,而不在组件的层次结构中。

b.工具提示:将工具提示内容放置在文档的某个特定位置,以避免被其他元素遮挡。

c.下拉菜单:在某个特定区域(例如导航栏)中渲染下拉内容,以保持样式和布局的一致性。

2.属性
  • to: 这是一个字符串,指定要将内容传送到的目标位置。可以是一个 CSS 选择器,也可以是一个 DOM 节点。
  • disabled: 布尔值,指示是否禁用 teleport。设置为 true 时,内容不会被传送,仍然在原来的位置渲染。
3.示例
<template><div class="outer"><h3>父组件</h3><img :src="imgUrl" alt=""><Modal /></div>
</template>
<script setup>
import  Modal from './Modal.vue'
import {ref} from 'vue'
let imgUrl=ref('https://p0.ssl.qhimgs1.com/sdr/400__/t0473991f73e7e7f1be.jpg')
</script>
<style lang="scss" scoped>
.outer{width: 600px;height: 500px;background-color: #ededed;filter:saturate(200%)
}
</style><template><button @click="showModalFlag=true">展示弹窗</button><teleport to="body"><div class='modal' v-if="showModalFlag"><h2>弹窗标题</h2><p>弹窗内容</p><button @click="showModalFlag=false">关闭弹窗</button></div></teleport>
</template>
<script setup>
import{ref} from 'vue'
let showModalFlag=ref(false)
</script>
<style scoped lang='scss'>
.modal {width: 300px;height: 200px;border:2px solid black;background-color: skyblue;font-size: 20px;color:white;position: fixed;top:50%;left: 50%;transform: translate(-150px,-100px);
}
</style>

position: fixed; 是一种定位属性,用于将元素固定在浏览器视口的特定位置。无论用户滚动页面,固定定位的元素都会保持在设定的位置上。这种特性常用于创建导航条、弹出窗口和悬浮按钮等。

filter: saturate(200%) 是用于调整图像或元素颜色饱和度的一个属性。它使元素的颜色更加鲜艳和饱和。

二、<Suspense> 组件

在 Vue 3 中,<Suspense> 组件用于处理异步组件的加载状态,使开发者可以在异步操作完成之前渲染一个等待状态(如加载指示器)。这对于需要延迟加载或处理异步数据的场景非常有用,比如在使用 async 组件时。

<Suspense> 组件在 Vue 3 中为处理异步操作提供了一个优雅的方式。它允许你在加载异步组件时提供用户友好的反馈,提升用户体验。通过合理使用 <Suspense>,可以更有效地管理异步加载逻辑和状态。

1.基本概念
  • 异步组件:通过 defineAsyncComponent 创建的组件,这些组件在加载时可能需要一些时间。
  • 悬停状态:使用 <Suspense> 时,可以指定在异步组件加载时展示的内容,比如 loading 状态或备用内容
2.基本语法
<Suspense><template #default><!-- 这里是异步组件 --></template><template #fallback><!-- 这里是加载状态 --></template>
</Suspense>
 3.示例
<template><div class="outer"><h3>父组件</h3><Suspense><template v-slot:default> <Child /></template><template v-slot:fallback> <h2>加载中...</h2></template></Suspense></div>
</template>
<script setup>
import  Child from './Child.vue'
import {Suspense} from 'vue'
</script><template><p>{{ hitokoto }}</p>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
const hitokoto = ref('');
const fetchHitokoto = async () => {try {const response = await axios.get('https://v1.hitokoto.cn');hitokoto.value = response.data.hitokoto; console.log(hitokoto.value);} catch (error) {console.error('Error fetching hitokoto:', error);}
};
onMounted(() => {fetchHitokoto();
});
</script>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com