报错详情:
setup function returned a promise, but no boundary was found in the parent component tree. A component with async setup() must be nested in a in order to be rendered. 翻译: setup函数返回了一个promise,但没有边界在父组件树中找到。 具有异步setup()的组件必须嵌套在中才能呈现。
报错原因:
如果使用<script setup>,可以在顶部直接使用await,结果代码会被编译成 async setup()。
例如子组件A:
<script setup>
import {getAllFrd} from '@/api/addfriends'
let text = await getAllFrd()
</script >
这样使用了async setup()的子组件,父组件需要和Suspense配合使用,否则子组件渲染不出来,报错warn以上内容。文章来源:https://www.toymoban.com/news/detail-618496.html
解决:
父组件处理:文章来源地址https://www.toymoban.com/news/detail-618496.html
<script setup>
import { defineAsyncComponent } from 'vue'
const A = defineAsyncComponent(() =>
import('@/components/A.vue')
)
// 注意:同一个组件例如A组件,只能用一种引入方式,要么 defineAsyncComponent,要么import,
//不能不同父组件一个import一个defineAsyncComponent,否则打包时粘包
</script >
<template>
<div class="index">
<Suspense>
<template #default>
<A />
</template>
</Suspense>
</div>
</template>
到了这里,关于问题记录:A component with async setup()must be nested in a in order to be rendered.的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!