前端学习-vue视频学习016-vue3新组件

Teleport:让部分元素脱离原来的位置，到to指定的位置去

此处指定了弹窗到body标签内

<template>
    <h4>Model</h4>
    <button @click="isShow = true">打开弹窗</button>
    <Teleport to='body'>
        <div class="tanchuang" v-show="isShow">
            弹窗
            <button @click="isShow = false">关闭弹窗</button>
        </div>
    </Teleport>

 </template>
 
 <script setup name="Model" lang="ts">
 import { ref } from 'vue'
 let isShow = ref(false)
 
 </script>
 
 
 <style>
 .tanchuang {
        padding: 20px 0;
        border: 1px solid grey;
        border-radius: 5px;
        text-align: center;
        width: 200px;
        position: fixed;
        left: 50%;
        top: 100px;
        margin-left: -100px;
    }
 </style>

Suspense:当child组件有异步请求，网速较慢时显示较晚，需要有一个类似加载中的展示，使用

child

<template>
    <h4>Model</h4>
    <div class="tanchuang">
        弹窗
        <button>关闭弹窗</button>
    </div>

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

 let {data} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
 
 </script>
 
 
 <style>
 .tanchuang {
        padding: 20px 0;
        border: 1px solid grey;
        border-radius: 5px;
        text-align: center;
        width: 200px;
        position: fixed;
        left: 50%;
        top: 100px;
        margin-left: -100px;
    }
 </style>

Parent

<template>
   <div class="app">
    <h3>App</h3>
    <Suspense>
        <template v-slot:default>
            <Model/>
        </template>
        <template v-slot:fallback>
            <h3>loading</h3>
        </template>
    </Suspense>
   </div>
</template>

<script setup name="App" lang="ts">
import { Suspense } from 'vue';
import Model from './Model.vue'

</script>


<style>
    .app {
        padding: 20px 0;
        border: 1px solid grey;
        border-radius: 5px;
        text-align: center;
        background: linear-gradient(to right, skyblue, pink);
        width: 400px;
        height: 400px;
        filter: saturate(200%);
    }

</style>