vue3中批量全局注册组件实例详解

import {App} from 'vue'
import HomeVue from './Home.vue';
export default {
  install(app: App) {
    app.component("Home", HomeVue);
  }
}

import { createApp } from 'vue'
import './style.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
// 全局注册组件
import HelloWorldVue from './components/HelloWorld.vue'
// 引入ts文件对应的全局注册的组件的配置
import components  from './components/index'
const app = createApp(App)
// 全局注册组件
app.component("Helloword",HelloWorldVue)
// 对ts文件中的全局组件进行配置
app.use(components)
app.use(ElementPlus).mount('#app')

import {App} from 'vue'
import HomeVue from './Home.vue';
import HelloWorldVue from './HelloWorld.vue';
/** 
export default {
  install(app: App) {
    app.component("Home", HomeVue);
    app.component("Helloword", HelloWorldVue)
  }
}
*/
const components = [
  {title: 'Home', componentName: HomeVue},
  {title: 'Helloword', componentName: HelloWorldVue}
]
export default {
  install(app: App) {
    components.forEach(item => {
      // 通过循环遍历数据批量注册组件
      app.component(item.title, item.componentName)
    })
  }
}

import { createApp } from 'vue'
import './style.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
// 引入ts文件对应的全局注册的组件的配置
import components  from './components/myComponents'
const app = createApp(App)
// 对ts文件中的全局组件进行配置
app.use(components)
app.use(ElementPlus).mount('#app')

<script setup lang="ts">
</script>
<template>
  <div id="app">
    <Helloword></Helloword>
    <hr>
    <Home></Home>
  </div>
</template>
<style scoped>
</style>

import {App} from 'vue'
import { defineAsyncComponent,AsyncComponentLoader } from "vue";
const componentss = import.meta.glob("./**/*.vue");
console.log(componentss)
console.log(Object.entries(componentss))
/**
 * 全局组件引用管理
 */
export default {
  install(app: App) {
    for (let [key, value] of Object.entries(componentss)) {
      // 字符串截取，具体看下面console.log()中的name就知道了
      let name = key.slice(key.lastIndexOf("/") + 1, key.lastIndexOf("."));
      console.log(`注意这里的name名称=》》            ${name}       ===>这个名称，
      自己作为了全局祖册组件的名称了,也就是如左侧目录的：aaa.vue去掉.vue就剩下aaa了
      ，然后那这个名称作为组件引用的名称，具体看截图就知道了。这时就是相当于跟左侧
      项目目录的.vue结尾的文件去掉.vue得到的名称`)
      app.component(name, defineAsyncComponent(value as AsyncComponentLoader));
    }      
  }
}

import { createApp } from 'vue'
import './style.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
// 引入ts文件对应的全局注册的组件的配置
import components  from './components/myComponents'
const app = createApp(App)
// 对ts文件中的全局组件进行配置
app.use(components)
app.use(ElementPlus).mount('#app')

<script setup lang="ts">
</script>
<template>
  <div id="app">
    <HelloWorld></HelloWorld>
    <hr>
    <Home></Home>
    <hr>
    <aaa></aaa>
    <hr>
    <bbb></bbb>
  </div>
</template>
<style scoped>
</style>