Vue3(Vite)如何在渲染函数中无需显式导入自动引入组件

核心思路 #

Vue3的h函数接收字符串时只会识别原生HTML标签，要渲染自定义组件，必须先把所有自定义组件批量导入并建立组件名到组件实例的映射表，再通过组件名从映射表中取出对应组件传入h函数。

实现步骤 #

1. 批量导入自定义组件并构建映射表 #

利用Vite提供的import.meta.glob API，批量指定目录下的自定义组件（示例以src/components/目录为例），并生成组件名与组件实例的对应关系：

// src/utils/globalComponents.js
// 批量导入components目录下所有.vue文件，支持子目录
const components = import.meta.glob('../components/**/*.vue', { eager: true })

const componentMap = {}
for (const path in components) {
  // 从文件路径中提取组件名（如从'../components/MyInput.vue'中获取'MyInput'）
  const componentName = path.split('/').pop().replace('.vue', '')
  // 存储组件的默认导出
  componentMap[componentName] = components[path].default
}

export default componentMap

2. 在动态组件中使用映射表 #

修改你的组件代码，从映射表中匹配目标组件后传入h函数：

import { h } from "vue";
import componentMap from '@/utils/globalComponents'

export default {
  props: {
    params: {
      type: Object,
      required: true,
      validator: (val) => val.tag && typeof val.tag === 'string'
    },
  },
  setup(props) {
    return () => {
      // 优先匹配自定义组件，不存在则降级为原生HTML标签
      const TargetComponent = componentMap[props.params.tag] || props.params.tag
      return h(TargetComponent, {
        ...props.params.props,
        // 如需传递attrs、事件等，可在此扩展参数
      })
    }
  },
};

3. （可选）全局注册组件方案 #

如果需要在全局范围内直接通过组件名调用，可在main.js中批量注册全局组件：

import { createApp } from 'vue'
import App from './App.vue'
import componentMap from './utils/globalComponents'

const app = createApp(App)

// 批量注册全局组件
for (const [name, component] of Object.entries(componentMap)) {
  app.component(name, component)
}

app.mount('#app')

此时可使用resolveComponent API直接获取全局组件：

import { h, resolveComponent } from "vue";

export default {
  props: {
    params: Object,
  },
  setup(props) {
    return () => {
      const TargetComponent = resolveComponent(props.params.tag) || props.params.tag
      return h(TargetComponent, props.params.props)
    }
  },
};

关键说明 #

• import.meta.glob的eager: true表示立即导入组件，若需懒加载可移除该选项并调整映射表逻辑。
• 组件名提取规则可根据你的目录/命名习惯调整（如短横线命名转大驼峰）。
• 若传入的tag未匹配到自定义组件，会自动降级渲染原生HTML标签，与Vue2的行为一致。

内容的提问来源于stack exchange，提问作者Meteor