Vue学习计划-Vue3--Vue3新组件

原创

新茶十九 2024-01-29 08:23:46 博主文章分类：Vue ©著作权

文章标签 Teleport suspense 组件 文章分类 Vue.js 前端开发

©著作权归作者所有：来自51CTO博客作者新茶十九的原创作品，请联系作者获取转载授权，否则将追究法律责任

`Vue3`新组件

【Teleport】

什么是Tepeport: -- Teleport是一种能够将我们的组件html结构移到到指定位置的技术

比如弹窗，我们在父组件中引入了弹窗，但是由于父的容器加了特殊的css，导致我们弹窗的position:fixed受到了影响，不会以浏览器窗口为基准了，这就不会满足我们的需求，此时就需要用到Teleport

<template>
	<div class="app">
    <button @click="isShow = true">点击弹窗</button>
    <Teleport to='body' >
      <div class="model" v-if="isShow">
        <h2>显示标题</h2>
        <h2>显示内容</h2>
        <button @click="isShow = false">关闭弹窗</button>
      </div>
    </Teleport>
	</div>
</template>

<script setup lang="ts" name="App">
import { ref } from 'vue';
let isShow = ref(false)
</script>
<style>
.app{
  width: 500px;
  height: 600px;
  background-color: aqua;
  filter: saturate(20%); /*此样式就导致position:fixed不会以浏览器窗口为基准了 */
}
.model{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 10%;
  left: 50%;
  width: 200px;
  height: 300px;
  background-color: antiquewhite;
}
</style>

【Suspense】

等待异步组件时渲染一些额外内容，让应用有更好的用户体验
使用步骤:
- 引入异步组件
- 使用Suspense包裹组件，并配置好default与fallback

父组件

<template>
	<div class="app">
    <button @click="isShow = true">点击弹窗</button>
    <Suspense>
        <!-- <template #default>
            <Child/>
        </template> -->
        <!-- 插槽的形式： default默认是展示要显示的组件内容 -->
        <Child/>
        <!-- fallback表示发送请求过程中展示的内容 -->
        <template #fallback>
            loading...
        </template>
    </Suspense>
	</div>
</template>

<script setup lang="ts" name="App">
import Child from './Child.vue';
import { ref } from 'vue';
let isShow = ref(false)
</script>

子组件

<template>
  <div>
    <h2>数字是{{ num }}</h2>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref } from 'vue';

let num = ref(0)
// 子组件内使用可以直接使用await, setup()的组件支持async，返回一个Promise, 但是async setup()的组件的呈现必须要使用Suspense包裹
const {data:{content}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
console.log(content, 'content')
</script>