Vue.js 中＜teleport＞组件，＜Suspense＞组件

一、＜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>

Vue.js 中＜teleport＞ 组件，＜Suspense＞ 组件

一、＜teleport＞ 组件

1.使用场景

2.属性

3.示例

二、<Suspense> 组件

1.基本概念

2.基本语法

3.示例

Vue.js 中＜teleport＞组件，＜Suspense＞组件

一、＜teleport＞组件

二、`<Suspense>` 组件