今天写Vue3 setup 脚本的时候!遇到了这么一个报错!
大致意思是说:
[Vue warn]:Component<Anonymous>:setup函数返回了一个promise
但在父组件树中找不到<Suspense>边界。具有异步setup()的组件必须嵌套在<Suspense>中才能呈现。
首先因为在 script-setup 模式下,不必再配合 async 就可以直接使用 await 了,这种情况下,组件的 setup 会自动变成 async setup 。
所以我的代码是这样的!
<script setup lang="ts">
...
/**
* filterParams 列表过滤参数!
*/
const filterParams = ref<MMCP_PWD_LIST>({
systemName: "",
companyName: "",
pageSize: 10,
pageNum: 1,
type: "",
year: "",
});
const data = ref<RootObject["result"]["list"]>([]);
const mmcpList: RootObject = await getMMCP_PWD_LIST(filterParams.value);
当你组件中有 Promise 对象时,即 Axios、Ajax 这类的请求,然后把数据渲染到模板中就会报如下图的错误:
因为这个组件有异步的操作导致页面的变化!那么就需要父组件对变换有边界处理!
所以出现这种情况我们需要包裹 Suspense 组件!才能解决问题!
<Suspense>
<router-view></router-view>
</Suspense>
但是注意,此组件为实验性功能!
评论区