17.0 vue3 Suspense的用法

上一篇：

16.0 vue3 Teleport---自定义dialog组件_十一月的萧邦-CSDN博客上一篇：15.0 vue3 provide&inject跨组件通信方式_十一月的萧邦-CSDN博客上一篇：14.0 vue3 customRef的使用_十一月的萧邦-CSDN博客上一篇：vue3 toRaw&markRawhttps://blog.csdn.net/qq_42543244/article/details/122793302本篇记录vue3的customRef，customRef是vue3的一大亮点，custom的意思大家都懂，自定义的意思，一旦出现自定义，那么就代表我们可https://blog.csdn.net/qq_42543244/article/details/122967700本篇记录，vue3中新增的标签 Suspense，示例一个简单的用法：

当我们的请求未得到响应时，展示loading，响应回来后，展示需要展示的内容。

在vue2中要想做到此目的，需要我们去写一个loading的组件，或者是骨架屏之类的，然后定义一个变量 默认为true，得到响应后更改为false，true的时候展示loading，false的时候展示我们的列表内容之类的，但是在vue3中，我们要想达到此目的会更容易点

App.vue

<template><div class="grand"><h1>我是app</h1><Suspense><template v-slot:default><child :id="99"></child></template><template v-slot:fallback><div>Loading...</div></template></Suspense></div>
</template><script>
import Child from "@/components/Child.vue";
export default {name: "App",components: {Child,},
};
</script>
<style scoped>
.grand {background-color: rgb(150, 156, 154);padding: 50px;
}
</style>

Child.vue

<template><div class="child"><h3>{{ msg }}-{{ msg1 }}</h3><h3>{{ otherInfo }}</h3></div>
</template>
<script>
import { ref } from "vue";
export default {props: {id: {required: true,type: Number,default: null,},},async setup(props) {let otherInfo = ref("其他信息");let msg = await getData(props.id);let msg1 = await getData1(props.id);function getData(id) {console.log(id);return new Promise((resolve) => {setTimeout(() => {resolve("hello");}, 1000);});}function getData1(id) {console.log(id);return new Promise((resolve) => {setTimeout(() => {resolve("world");}, 3000);});}return { otherInfo, msg, msg1 };},
};
</script><style scoped>
.child {background-color: rgb(22, 129, 201);padding: 50px;
}
</style>

效果：

 三秒之后会变为：

请注意，插槽的名称是固定的，不是随便自定义的！