如何在运行时导入组件

Question

我开始使用Vue JS 3，我想知道我是否可以在运行时导入组件(模态)，我尝试过，但没有工作

watch:{
modal:{
handler(newModal){
App.component('modal', () => import(newModal))
}
}
},

Answer 1

你可以阅读"Async组件"Vue 3官方文档

基本上，你可以将一个组件注册为异步的，当它第一次尝试渲染时，它会惰性加载自己。

简单defineAsyncComponent

<template>
<div>
<Modal v-if="open" />
</div>
</template>
<script>
export default {
components: {
MySyncComponent,
Modal: defineAsyncComponent(() => import('./Modal.vue'))
}
}
</script>

使用<script setup>:

<script setup>
const Modal = defineAsyncComponent(() => import('./Modal.vue'))
</script>

指定自定义惰性加载选项:

const Modal = defineAsyncComponent({
loader: () => import('./Modal.vue'),
loadingComponent: ProgressSpinner,
delay: 150, // waits 150ms before showing the loading spinner
errorComponent: ErrorComponent,
timeout: 2000 // if not loaded before 2s, will show error
})

使用<Suspense>封装组件:

对于Suspense组件，默认情况下所有子组件都将被视为异步的。它们将在自己的代码块中。

<Suspense>
<Modal v-if="open"> <!-- Loading as asynchronous -->
<template #fallback>
Loading...
</template>
</Suspense>