木灵鱼儿

木灵鱼儿

阅读:170

最后更新:2022/08/19/ 0:17:34

vue3 异步组件

书接上文,我们的函数式组件在vue3里只能声明一个函数再通过h函数组合处理,然后导出使用,你会发现这个组件是一个函数类型。

然后我再去看一下vue2时,我们的异步组件引入方式:

const asyncModal = () => import('./Modal.vue')

你会发现除了异步组件也是一个函数类型,这就尴尬了,怎么区分呢?

vue3提供了一个defineAsyncComponent函数用于区分异步组件。

import { defineAsyncComponent } from 'vue'
const asyncModal = defineAsyncComponent(() => import('./Modal.vue'))

需要注意的时,vue-router的异步组件还是和以往一样,跟defineAsyncComponent是没有关系的。

高级组件

引入的组件是支持参数配置的,vue2和vue3略有不同,其中最大的改动就是原来component改为了loader

vue2:

const asyncModal = {
  component: () => import('./Modal.vue'),
  delay: 200,
  timeout: 3000,
  error: ErrorComponent,
  loading: LoadingComponent
}

vue3:

import { defineAsyncComponent } from 'vue'
import ErrorComponent from './components/ErrorComponent.vue'
import LoadingComponent from './components/LoadingComponent.vue'

const asyncModalWithOptions = defineAsyncComponent({
  loader: () => import('./Modal.vue'),
  delay: 200,
  timeout: 3000,
  errorComponent: ErrorComponent,
  loadingComponent: LoadingComponent
})

注意loader函数必须接一个promise对象。

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 32
文章被阅读 170

相关文章

目录树