vue3之异步组件defineAsyncComponent 使用无效？(在vue项目如何引入异步组件?)

编辑：rootadmin

原文地址：我的稀土掘金介绍：defineAsyncComponent 用于拆分应用为更小的块，并仅在需要时再从服务器加载相关组件官网案例 <script setup> import { defineAsyncComponent } from 'vue' const AdminPage = def ...

推荐整理分享vue3之异步组件defineAsyncComponent 使用无效？(在vue项目如何引入异步组件?)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue3.0异步组件,在vue项目如何引入异步组件?,vue异步调用方法,vue3.0异步组件,在vue项目如何引入异步组件?,vue3 异步组件,vue3 异步组件,vue的异步组件,内容如对您有帮助，希望把文章链接给更多的朋友！

原文地址：我的稀土掘金

介绍：defineAsyncComponent 用于拆分应用为更小的块，并仅在需要时再从服务器加载相关组件

官网案例<script setup>import { defineAsyncComponent } from 'vue'const AdminPage = defineAsyncComponent(() => import('./components/AdminPageComponent.vue'))</script><template> <AdminPage /></template> vue3之异步组件defineAsyncComponent 使用无效？(在vue项目如何引入异步组件?)

vue3之异步组件defineAsyncComponent 使用无效？(在vue项目如何引入异步组件?)

结果展示

大致意思：无法读取未定义的属性

打印一下这个异步组件和普通组件的值

输出的值区别不大

再看官网import { defineAsyncComponent } from 'vue'const AsyncComp = defineAsyncComponent(() => { return new Promise((resolve, reject) => { // ...从服务器获取组件 resolve(/* 获取到的组件 */) })})// ... 像使用其他一般组件一样使用 `AsyncComp`

这种写法是没有问题的，但是有return 导出该数据

最后改造<script setup>import { defineAsyncComponent } from 'vue'const AdminPage = defineAsyncComponent(() => return import('./components/AdminPageComponent.vue'))</script><template> <AdminPage /></template>结果

官网上异步组件，存在代码疏漏，import 前需要return才会生效

本文链接地址:https://www.jiuchutong.com/zhishi/310495.html 转载请保留说明！

上一篇：java委托事件模型的使用(java委托模式和代理模式)

下一篇：phpcms后台验证码不显示怎么办(phpcms验证码不显示)