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>