（八）异步组件加载使用

@

目录

• 异步组件加载使用
  • 注意:
• 捕捉错误

异步组件加载使用

就是你使用的子组件在还没有加载完成的时候 和 加载完成的之后的使用

在子组件中的setup中需要返回一个promise

这个组件就是3秒之后 加载返回result的结果
<template>
	<h1>{{result}}</h1>
</template>
<script lang="ts">
	import {defineComponent} from 'vue'
	export default defineComponent({
		setup(){
			 return new Promise((resolve)=>{
				setTimeout(()=> {
					return resolve({
						result:45
					})	
				},3000)
			})
		}
	})
</script>

在父组件中 就是使用这个组件的时候，可以直接是用Suspense进行相应的使用

<Suspense>
	这个就是使用插槽的方式 将加载中的状态 和 已经加载完成之后的显示
  <template #default>
  		 --子组件--
		<async-show />
  </template>
  <template #fallback>
		<h1>加载中Loading~~~</h1>
  </template>
</Suspense>

注意:

这个地方可以放多个组件 <template #default> </template> 会去顺序加载完成显示，等你里面的多个组件都加载完成了，才会一并显示，否则之前显示loading

捕捉错误

import { onErrorCaptured , defineComponent } from 'vue'
export default defineComponent({
	setup(){
		定义一个ref响应式对象 可以直接同步
		const error = ref(null)
		onErrorCaptured((e:any) => {
			error.value = e
			钩子函数需要返回一个boolean，是否向上传播
			return true
		})
		
		return{
			error
		}	
	}
})