Vue3 异步组件的使用
Vue3 中 使用 defineAsyncComponent 定义异步组件,配置选项 component 替换为 loader ,用法如下:<template><!-- 异步组件的使用 --><AsyncPage /></tempate><script>import { defineAsyncComponent } from "vue";
·
Vue3 中 使用 defineAsyncComponent 定义异步组件,配置选项 component 替换为 loader ,用法如下:
<template>
<!-- 异步组件的使用 -->
<AsyncPage />
</tempate>
<script>
import { defineAsyncComponent } from "vue";
export default {
components: {
// 无配置项异步组件
AsyncPage: defineAsyncComponent(() => import("./NextPage.vue")),
// 有配置项异步组件
AsyncPageWithOptions: defineAsyncComponent({
loader: () => import(".NextPage.vue"),
delay: 200,
timeout: 3000,
errorComponent: () => import("./ErrorComponent.vue"),
loadingComponent: () => import("./LoadingComponent.vue"),
})
},
}
</script>
更多推荐
已为社区贡献7条内容
所有评论(0)