vue3批量注册全局组件

shuleijia

已于 2023-08-30 09:59:42 修改

阅读量656

点赞数

分类专栏： vue3 文章标签： vue.js 前端 javascript

于 2023-01-11 11:10:01 首次发布

本文链接：https://blog.csdn.net/shuleijia/article/details/128641356

版权

vue3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章讨论了两种Vue组件的注册方式：普通注册和全局注册。普通注册需要逐个引入组件，当组件数量增加时变得繁琐；全局注册则利用require.context进行批量导入，简化了大量组件的管理。这种方式提高了代码的维护性和效率。

摘要由CSDN通过智能技术生成

1. 目录结构

components

2.普通注册-index.js

import Skeleton from './skeleton.vue'

  import Carousel from './carousel'

  import More from './more'

  export default {
    install (app) {
      app.component(Skeleton.name, Skeleton)
      app.component(Carousel.name, Carousel)
      app.component(More.name, More)
    }
  }

这样的坏处是如果有越来越多的全局组件，需要一个一个单独的引入，会很麻烦

3.全局注册-index.js

export default {
  install (app) {
    const ctx = require.context('./', false, /\.vue$/)
    ctx.keys().forEach(item => {
      const component = ctx(item).default
      app.component(component.name, component)
    })
  }
}