当前位置：首页 > news >正文

vue3中动态引入组件并渲染组件

news 2025/7/5 12:49:34

在开发中有时会在打包或者各种可能的情况下报错或警告提示模块化打包的问题，
我们需要动态引入组件并渲染组件时，
方法1: 可以使用import引入结合component标签使用
如下举例

import { ref, markRaw } from 'vue'
const childrenComponent = ref();
onMounted(() => {//举例引入一个组件childrenComponent.vueimport('**/..**../childrenComponent.vue').then((module) => {childrenComponent.value = markRaw(module.default);// 确保该赋值操作不会反复触发重新渲染});
});

可以使用component标签和:is 属性来动态创建和使用组件。

  <component :is="childrenComponent" v-if=" childrenComponent"/>

方法2: vue3的defineAsyncComponent

defineAsyncComponent 是 Vue 3 提供的一个功能，它允许你定义一个异步组件。这意味着组件的加载会被延迟，直到它真正需要被渲染到页面上时才会加载。这对于大型应用来说特别有用，因为它可以帮助减小初始加载时间，实现按需加载。

js中

import { defineAsyncComponent } from 'vue';const AsyncComp = defineAsyncComponent(() =>new Promise((resolve, reject) => {// 模拟异步操作setTimeout(() => {// 模拟从服务器动态导入组件import('./children.vue').then(component => {resolve(component);});}, 1000);})
);export default AsyncComp;

vue文件中
你可以像使用普通组件一样 import引入js 后使用 AsyncComp组件：

<template><div><AsyncComp /></div>
</template><script>
import AsyncComp from './path/to/AsyncComp.js';export default {components: {AsyncComp}
}
</script>

defineAsyncComponent 可以接受一个返回 Promise 的工厂函数，如上例所示。
你也可以使用 import() 语法来定义组件：

import { defineAsyncComponent } from 'vue';const AsyncComp = defineAsyncComponent(() =>import('./children.vue')
);

在这个例子中，children.vue 会在需要渲染 AsyncComp 组件时才被加载。
这种方式利用了原生的 ES6 import() 函数来动态导入组件，当异步组件被解析时，Vue 会自动处理组件的注册和渲染。

高级用法
defineAsyncComponent 还接受一个选项对象，允许你配置一些高级特性，比如加载中的组件、错误处理、延迟加载等：

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

loader: 返回一个 Promise，该 Promise 应该 resolve 组件定义。
loadingComponent: 在组件加载过程中渲染的组件。
errorComponent: 如果加载组件失败，则渲染此组件。
delay:在显示加载组件之前的延迟时间（毫秒）。
timeout: 如果加载组件的时间超过这个时间，则显示错误组件（毫秒）。

注意事项