vue3批量注册全局组件

vue3 批量注册全局组件

第一步，在入口文件引入批量注册全局组件的文件并使用

// main.ts
import gloablComponent from '@/components/index.ts'

createApp(App).use(gloablComponent).mount('#app')

第二步，在 components 中创建一个 index.ts 文件用于批量注册的逻辑

第三步，编写相关逻辑

// 提前准备了几个svg，button,table自定义组件
import SvgIcon from '@/components/SvgIcon/index.vue'
import Button from '@/components/Button/index.vue'
import Table from '@/components/Table/index.vue'

import type { App, Component } from 'vue'

// 把他们放进一个对象
const components: { [name: string]: Component } = { SvgIcon, Button, Table }
export default {
  // 暴露即调用这个函数，形参能拿到app实例
  // vue提供install可供我们开发新的插件及全局注册组件等
  // install方法第一个参数是vue的构造器，第二个参数是可选的选项对象
  install(app: App) {
    //  通过Object.keys将他们分为由key值组成的数组，再通过forEach拿到每一个key,拿到后则一一注册
    Object.keys(components).forEach((key: string) => {
      app.component(key, components[key])
    })
  },
}

方法 2

import SvgIcon from '@/components/SvgIcon/index.vue'
import Button from '@/components/Button/index.vue'
import Table from '@/components/Table/index.vue'

export default {
  install(Vue) {
    Vue.component('SvgIcon', PageTools)
    Vue.component('Button', update)
    Vue.component('Table', ImageUpload)
  },
}

这样也可以，只不过麻烦点，同样是第一，第二步要做