Vue3中的setup前加上async后页面不显示
问题: Vue3项目中,在setup函数前加上了async,使其变成异步函数,导致页面空白不显示?描述: 最近在学习Vue3项目,使用了CompositionAPI的书写方式,其中有一个setup函数,因为在这个函数中使用了请求等异步操作,所以需要使用async/await,但是在setup前加上async后,导致页面空白不显示了,去掉则页面正常显示;解决: 在Vue3中,如果当前组件的setup
·
问题: Vue3项目中,在setup函数前加上了async,使其变成异步函数,导致页面空白不显示?
描述: 最近在学习Vue3项目,使用了CompositionAPI的书写方式,其中有一个setup函数,因为在这个函数中使用了请求等异步操作,所以需要使用async/await,但是在setup前加上async后,导致页面空白不显示了,去掉则页面正常显示;
解决: 在Vue3中,如果当前组件的setup使用了async/await,那么其调用组件的父组件的外层需要嵌套一个suspense标签,例如:
异步组件:
//这里是写异步的组件
async setup(){
//内容
}
调用异步组件的父组件
<suspense>
<async-component/>
</suspense>
更多推荐
已为社区贡献24条内容
所有评论(0)