vue3中的Suspense（不确定的）

Posted 2022-02-05 web半晨

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue3中的Suspense（不确定的）相关的知识，希望对你有一定的参考价值。

1、介绍

Suspense组件允许应用程序在等待异步组件时渲染一些后备内容，从而创建一个平滑的用户体验。说白了就是loading效果。

2、示例代码

2.1、父组件

2.1.1、html部分

<template>
	<Suspense>
		<template v-slot:default>
			<AsyncComp/>
		</template>

		<template v-slot:fallback>
			<h1>LOADING...</h1>
		</template>
	</Suspense>
</template>

2.1.2、typescript部分

import  defineAsyncComponent  from 'vue'
// 静态引入组件
// import AsyncComp from './AsyncComp.vue'
// 动态引入组件
const AsyncComp = defineAsyncComponent(() => import('./AsyncComp.vue'))

export default 
	setup() 
		return 
	,

	components:  AsyncComp

2.2、子组件

2.2.1、html部分

<template>
	<h2>AsyncComp22</h2>
	<p>msg</p>
</template>

2.2.2、typescript部分

export default 
	name: 'AsyncComp',
	setup () 
		// return new Promise((resolve, reject) => 
		//   setTimeout(() => 
		//     resolve(
		//       msg: 'abc'
		//     )
		//   , 2000)
		// )
		return 
			msg: 'abc'