vue如何实现全局组件注册

这篇文章主要为大家展示了"vue如何实现全局组件注册"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"vue如何实现全局组件注册"这篇文章吧。

全局组件注册

1 一般情况

需要使用组件的场景：

我们写了一堆基础UI组件，然后每次我们需要使用这些组件的时候，都得先import，然后声明components，很繁琐，这里可以使用统一注册的形式

2 优化

我们需要借助一下神器webpack，使用 require.context() 方法来创建自己的 模块 上下文，从而实现自动动态require组件。这个方法需要3个参数：要搜索的文件夹目录、是否还应该搜索它的子目录、以及一个匹配文件的正则表达式。 我们在components文件夹添加一个叫componentRegister.js的文件，在这个文件里借助webpack动态将需要的基础组件统统打包进来。 /src/components/componentRegister.js

import Vue from 'vue'/** * 首字母大写 * @param str 字符串 * @example heheHaha * @return {string} HeheHaha */function capitalizeFirstLetter(str) { return str.charAt(0).toUpperCase() + str.slice(1)}/** * 对符合'xx/xx.vue'组件格式的组件取组件名 * @param str fileName * @example abc/bcd/def/basicTable.vue * @return {string} BasicTable */function validateFileName(str) { return /^\S+\.vue$/.test(str) && str.replace(/^\S+\/(\w+)\.vue$/, (rs, $1) => capitalizeFirstLetter($1))}const requireComponent = require.context('./', true, /\.vue$/)// 找到组件文件夹下以.vue命名的文件，如果文件名为index，那么取组件中的name作为注册的组件名requireComponent.keys().forEach(filePath => { const componentConfig = requireComponent(filePath) const fileName = validateFileName(filePath) const componentName = fileName.toLowerCase() === 'index' ? capitalizeFirstLetter(componentConfig.default.name) : fileName Vue.component(componentName, componentConfig.default || componentConfig)})

这里文件夹结构：

components│ componentRegister.js├─BasicTable│ BasicTable.vue├─MultiCondition│ index.vue

这里对组件名做了判断，如果是index的话就取组件中的name属性处理后作为注册组件名，所以最后注册的组件为： multi-condition 、 basic-table 最后我们在main.js中import 'components/componentRegister.js'，然后我们就可以随时随地使用这些基础组件，无需手动引入了~

以上是"vue如何实现全局组件注册"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！