vue实现全局组件自动注册,无需再单独引用
更新时间：2022年03月29日 10:30:16 作者：周郭郭先生
这篇文章主要介绍了vue实现全局组件自动注册，无需再单独引用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue全局组件自动注册
1、在components目录下创建一个global目录，里面放置一些需要全局注册的组件。
index.js作用只要是引入main.vue，导出组件对象
2、在components中创建一个index.js，用来扫描全局对象并自动注册。
3、最后在入口文件main.js中导入这个index.js中就可以了
4、直接使用
自动化注册全局组件脚本
今天有一个idea，vue一些组件，可能会全局都用到，我觉得在main.js写
Vue.component(name, instance)
然后很命令式，写着也不好看，想着能够有一个函数可以指定加载比如components下的文件，自动完成全局化注册，想起来就很帅
放代码：
export function autoLoadingGlobalComponent() {
const requireComponent = require.context(
// 其组件目录的相对路径
'../components',
// 是否查询其子目录
false,
// 匹配vue后缀文件名的文件
/\.vue$/
)
// 遍历获取到的文件名，依次进行全局注册
requireComponent.keys().forEach(fileName => {
// 获取组件配置(实例)
const componentConfig = requireComponent(fileName)
// 获取组件的 PascalCase 命名(eg: MYHeader)
const componentName = _.upperFirst(
// 获取驼峰式命名
_.camelCase(
// 剥去文件名开头的 `./` 和结尾的扩展名 eg: ./food-header.vue -> foodHeader
fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
)
)
// 全局注册组件
Vue.component(
componentName,
// 如果这个组件选项是通过 `export default` 导出的，
// 那么就会优先使用 `.default`，
// 否则回退到使用模块的根。
componentConfig.default || componentConfig
)
})
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了Vue实现时间轴功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
这篇文章主要给大家介绍了Vue如何获取url路由地址和参数的相关资料,通过简单的代码示例,帮助读者快速掌握Vue路由的基本用法,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了在vue中使用回调函数,this调用无效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
本文主要介绍了elementUI弹窗里的表单重置不生效问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要介绍了Vue3如何在SCSS中使用v-bind,通过template先创建一个通用的页面结构,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-03-03
这篇文章主要介绍了vue-plugin-hiprint 详细使用说明,使用Vue.Draggable库构建可拖拽元素的示例,你可以根据具体需求和技术选型选择适合的库或方法来实现可拖拽元素的功能,需要的朋友可以参考下2023-08-08
这篇文章说明了如何使用Vue去刷新当前页面的多种方法实例,有完成的代码提供参考,希望对你有所帮助2021-06-06
这篇文章主要介绍了vue render函数动态加载img的src路径操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了Vue3中如何自定义双向绑定问题,具有很好的参考价价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
因为项目需要，近期做了一个公众号网页开发。在此期间也踩了一些坑，解决这些坑之后，准备对这个项目进行复盘。记录下项目从开发到上线所解决的问题，并对使用vue进行公众号开发的步骤进行一个总结。方便以后有问题进行查阅。希望对你有所帮助2021-05-05
最新评论