vue3动态组件defineAsyncComponent

当有多个页面有相同展示模块内容,可以使用动态组件defineAsyncComponent优化代码加载页面

//1定义方法
import { defineAsyncComponent } from 'vue'

// const modules = import.meta.glob('../views/**/*.{vue}')
const modules = import.meta.glob('../views/**/*.vue')

/**
 * 注册一个异步组件
 * @param componentPath 例:/views/oa/leave/detail
 */
export const registerComponent = (componentPath) => {
    console.log(modules,"modules");

  for (const item in modules) {
    if (item.includes(componentPath)) {
      // 使用异步组件的方式来动态加载组件
      return defineAsyncComponent(modules[item])
    }
  }
}
//2引入使用
import {registerComponent} from "@/utils/routerHelper";

//3传入动态路径
BusinessFormComponent.value = registerComponent(ViewPath)

//4展示组件
 <view class="pd">
          <BusinessFormComponent :id="id" />
</view>
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue3中,异步组件可以使用defineAsyncComponent函数进行定义。它会返回一个组件对象,可以在需要时进行动态加载。而Suspense组件则是用于处理异步组件加载时的“等待”状态,它可以显示一个自定义的“等待中”组件,直到异步组件加载完成并渲染出来。 具体来说,在使用defineAsyncComponent定义异步组件时,可以在组件选项中添加loading选项,用于指定Suspense组件中的“等待中”组件。这样,在异步组件加载完成前,Suspense组件会显示loading选项指定的组件,等异步组件加载完成后,再渲染出异步组件。 举个例子,假设我们有一个异步组件如下: ```vue <template> <div>异步组件内容</div> </template> <script> export default { name: 'AsyncComponent', // ... 异步加载组件 } </script> ``` 我们可以使用defineAsyncComponent函数来定义它,并添加loading选项: ```js import { defineAsyncComponent } from 'vue' const AsyncComponent = defineAsyncComponent({ name: 'AsyncComponent', loader: () => import('./AsyncComponent.vue'), loading: { template: '<div>加载中...</div>' } }) ``` 然后,在需要使用异步组件的地方,我们可以用Suspense组件包裹: ```vue <template> <Suspense> <template #default> <AsyncComponent /> </template> <template #fallback> <div>等待中...</div> </template> </Suspense> </template> ``` 这样,在异步组件加载完成前,Suspense组件会显示loading选项中的内容;加载完成后,就会渲染出异步组件的内容。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值