vue3.0 + 动态加载组件 + 全局注册组件

首先 vue 动态加载组件使用的是 component 标签，并通过设置组件的is 属性来指定要渲染的组件。例如：

<component :is="currentComponent"></component>

其中，currentComponent 是一个变量，它的值可以是以下几种：
已注册的组件名
HTML 标签名称
导入的组件对象

使用方法：
父组件

<template>
  <component :is="componentName" :num="num" @changeNum="changeNum"></component>
</template>
<script setup>
import { ref, onMounted } from "vue";
const componentName = ref(null);
const num = ref(0);
onMounted(async () => {
  // 异步加载组件
  const moduleName = 'TestOne';
  loadModule(moduleName);

  setTimeout(() => {
    loadModule('TestTwo');
  }, 3000);
});

const loadModule = async (moduleName) => {
  // import 后面是文件路径
  const module = await import(`./module/${moduleName}.vue`);
  componentName.value = module.default;
}

const changeNum = () => {
  num.value++;
}
</script>

子组件TestTwo.vue

<template>
  <div>
    Test2{{num}}
    <button @click="changeNum">加</button>
  </div>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue';
defineProps({
  num: Number
});
const emit = defineEmits(["changeNum"]);
const changeNum = ()=>{
  emit("changeNum");
}
</script>

这时我们发现每次加载组件都需要 import 去重新加载，比较浪费性能，我们可以采用在 main.js中集中一次全局注册组件。下面介绍的方法4

// 引入全局注册组件
import globalComponent from './register.js'
createApp(App).use(ElementPlus).use(globalComponent).mount('#app')

这样我们就可以直接这样用

全局注册组件有多种方法：

1、在main.js中

// 引入所有需要注册的全局组件
import TestOne from '@/components/module/TestOne.vue'
import TestTwo from '@/components/module/TestTwo.vue'
//定义一个数组结构
const components = [
  { name: 'TestOne', component: TestOne },
  { name: 'TestTwo', component: TestTwo },
];
//遍历数组进行循环注册
components.forEach(component => {
  Vue.component(component.name, component.component);
});

2、利用vue的插件模式
1）在register.js中

// 引入所有需要注册的全局组件
import TestOne from './TestOne.vue'
import TestTwo from './TestTwo.vue'
const globalComponents = [TestOne, TestTwo];
export default {
  install (Vue) {
    globalComponents.forEach(component => {
      // 这里用的是组件里面的name
      // 如果引入的组件没有写name，会报错 ： vue.esm.js:100 Uncaught TypeError: Cannot read properties of undefined (reading 'toLowerCase')
      Vue.component(component.name, component);
    });
  }
}

2）在main.js中

// 引入全局注册组件
import globalComponent from './register.js'
Vue.use(globalComponent)

3、使用自动化导入，请注意文件路径
在main.js中

const componentContext = require.context('@/components/module', true, /.vue$/);

componentContext.keys().forEach(fileName => {
  //获取当前遍历的组件
  const componentConfig = componentContext(fileName);
  //获取当前组件的文件名称
  const componentName = fileName.replace(/^.//, '').replace(/.w+$/, '');
  //注册组件
  Vue.component(componentName, componentConfig.default || componentConfig);
});

上述代码会自动匹配components/module目录下以.vue为后缀的组件文件，并自动注册为全局组件

4、使用Vue插件和组件自动化注册（推荐）
1）在register.js中

const VueAutoRegister = {
  install (Vue) {
    //获取所有的vue文件
    const requireComponent = require.context('@/components/module', true, /.vue$/);
    requireComponent.keys().forEach(fileName => {
      //获取当前遍历的组件
      const componentConfig = requireComponent(fileName);
      //获取当前组件的文件名称 vue文件中声明的name属性 || 文件名称
      const componentName = componentConfig.default.name || fileName.replace(/^./(.*).w+$/, '$1');
      //把文件名称当成组件名称，全局注册
      Vue.component(componentName, componentConfig.default || componentConfig);
    });
  }
};
export default VueAutoRegister;

2）在main.js中

// 引入全局注册组件
import globalComponent from './register.js';
Vue.use(globalComponent)

5、vite+vue3的方式：
1）在register.js中

import { defineAsyncComponent } from "vue";

const VueAutoRegister  = {
  install:(app) => {
    // import.meta.glob是vite的新api
    const components = import.meta.glob("./**.vue");
    // 遍历组件模块实现自动注册
    for (const [path, component] of Object.entries(components)) {
      // 把文件名称当作组件注册的 name
      const componentName = path.slice(path.lastIndexOf("/") + 1, path.lastIndexOf("."));
      // 通过 defineAsyncComponent 异步导入指定路径下的组件
      app.component(componentName, defineAsyncComponent(component));
    }
  }
}

export default VueAutoRegister;

2）在main.js中

// 引入全局注册组件
import globalComponent from './register.js'
const app = createApp(App)
app.use(globalComponent)

代码007普通

打赏 收藏 海报 链接