在使用vue构建项目的过程中,我们会设置一些通用的组件,他可能只包含了一个按钮或者其他的一个小功能,但是会被我们在不同的组件页面频繁调用。此时若是每一个组件页面都进行引用,将会有很多重复冗杂的代码,可以改为全局注册。具体如下:

1. 将这些通用基础组件放置在同一个文件夹下:如 components/baseComponents/

2. 在应用入口文件中全局导入(如:main.js),以下是官方示例代码,稍微做了修改:

// 全局导入组件
const requireComponent = require.context(
  // 其组件目录的相对路径
  './components/baseComponents',     
  // 是否查询其子目录
  false,                      
  // 匹配基础组件文件名的正则表达式, 这里可以匹配的文件名为BaseXxxx.vue格式
  /Base[A-Z]\w+\.(vue|js)$/   
)

requireComponent.keys().forEach(fileName => {
  // 获取组件配置
  const componentConfig = requireComponent(fileName)

  // 获取组件的 PascalCase 命名
  const componentName = upperFirst(
    camelCase(
      // 剥去文件名开头的 `'./` 和结尾的扩展名
      fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
    )
  )

  // 全局注册组件
  Vue.component(
    componentName,
    // 如果这个组件选项是通过 `export default` 导出的,
    // 那么就会优先使用 `.default`,否则回退到使用模块的根。
     componentConfig.default || componentConfig
  )
})

注意:上面这段代码必须放在 new Vue() 之前。

3. 在相应的组件页面直接使用注册好的全局组件:

<base-xxxx :title="'自动化全局注册基础组件'"></base-xxxx>

 

Logo

前往低代码交流专区

更多推荐