在使用 vue3 注册全局组件的时候,使用 app.component 注册组件在使用的时候会报:Invalid VNode type: undefined (undefined) 的错误。

const components = import.meta.glob("../components/form/*.vue");
function autoRegisterComponents(app: App) {
  Object.entries(components).forEach(([file, module]) => {
    const name = file.split("/").pop()?.replace(/.vue/, "") as string;
    app.component(name, module);
  });
}

解决:

   引入 defineAsyncComponent(定义一个异步组件,它在运行时是懒加载的。参数可以是一个异步加载函数,或是对加载行为进行更具体定制的一个选项对象。)

import { App, defineAsyncComponent } from "vue";

const components = import.meta.glob("../components/form/*.vue");
function autoRegisterComponents(app: App) {
  Object.entries(components).forEach(([file, module]) => {
    const name = file.split("/").pop()?.replace(/.vue/, "") as string;
    app.component(name, defineAsyncComponent(module));
  });
}

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐