vue3--学习技术胖笔记----第六波异步组件Suspense(就是组件不是一下就加载出来的交互怎么展示)

AsyncShow.vue --组件

<template>
  <div class="child">
    <div>我是子组件</div>
    <h3>{{result}}</h3>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({result:"JSPang"})
      }, 2000);
    });
  },
};
</script>
<style scoped>
.child {
  padding: 10px;
  background-color: #e8f;
}
</style>

App.vue ----调用方

<template>
  <div>
  <h2>欢迎光临红浪漫洗浴中心</h2>

  <Suspense>
    <template #default>
      <AsyncShow />
    </template>
    <template #fallback>
      <H2>Loading>>>></H2>
    </template>
   </Suspense>

  </div>
</template>
 
<script lang="ts">
// import {ref,} from "vue";
import AsyncShow from "./hoots/AsyncShow.vue"

export default({
  name:"APP",
  components:{AsyncShow},

  setup(){
    return{
      
  }
  },

  });
</script>


<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

组件未加载完成前