一、＜teleport＞ 组件
在 Vue.js 中，<teleport> 是一个非常强大的内置组件，用于将子组件或元素"传送"到 DOM 中的不同位置，而不仅限于它们在父组件中的结构。这可以帮助解决许多布局和样式方面的问题，尤其是在模态框、工具提示、下拉菜单等情况下。
1.使用场景
a.模态框 ：将模态框元素放在 <body> 中，而不在组件的层次结构中。
b.工具提示：将工具提示内容放置在文档的某个特定位置，以避免被其他元素遮挡。
c.下拉菜单：在某个特定区域（例如导航栏）中渲染下拉内容，以保持样式和布局的一致性。
2.属性
- to: 这是一个字符串，指定要将内容传送到的目标位置。可以是一个 CSS 选择器，也可以是一个 DOM 节点。
- disabled : 布尔值，指示是否禁用 teleport。设置为
true时，内容不会被传送，仍然在原来的位置渲染。
3.示例
javascript
<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.基本语法
javascript
<Suspense>
<template #default>
<!-- 这里是异步组件 -->
</template>
<template #fallback>
<!-- 这里是加载状态 -->
</template>
</Suspense>3.示例
javascript
<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>