【Vue自动全局注册组件】基础组件的自动化全局注册
通常我们在写vue项目时会产生很多的组件,一个两个还好,如果组件多了,那么就需要不停的注册。非常的繁琐和耗费时间,那么该如何一次部署,永久解决手动注册呢?那这边官方其实也是给出了具体的方案的,恰好今天有空,我们一起学习一下吧~.........
·
通常我们在写vue项目时会产生很多的组件,一个两个还好,如果组件多了,那么就需要不停的注册。非常的繁琐和耗费时间,那么该如何一次部署,永久解决手动注册呢?
那这边官方其实也是给出了具体的方案的,恰好今天有空,我们一起学习一下吧~
基础组件的自动化全局注册
首先我们需要选定一个存放组件的文件夹,一般来说以脚手架中自动生成的 components 文件夹为主。选好组件文件夹后我们需要
在文件夹中创建一个js文件,可以取名为index.js,如下图所示:
在index文件中,我们引入官方给出的自动注册代码:
.
为了大家好复制,这边把代码直接贴出来:
import Vue from 'vue'
const requireComponent = require.context(
// 其组件目录的相对路径 根据本文件所在的文件位置选定
'./',
// 是否查询其子目录
true,
// 匹配基础组件文件名的正则表达式 这边只匹配了vue后缀的文件,大家可以根据自己的需求来自定义正则表达式
/\.vue$/
)
requireComponent.keys().forEach(fileName => {
// 获取组件配置
const componentConfig = requireComponent(fileName)
console.log(componentConfig); //这边获取到组件的具体信息
// 全局注册组件
Vue.component(
componentConfig.default.name,
// 如果这个组件选项是通过 `export default` 导出的,
// 那么就会优先使用 `.default`,
// 否则回退到使用模块的根。
componentConfig.default
)
})
最后,我们只需要在main.js中来导入该文件,就可以实现全局自动注册组件啦~
.
代码如下:
import Vue from 'vue'
import App from './App.vue'
import './components/index' //根据官方提示 该全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生
Vue.config.productionTip = false
new Vue({ //没错就是在他前面
render: h => h(App),
}).$mount('#app')
结束,这样就可以在需要的地方直接使用啦。
注意,组件在全局用 Vue.component() 注册时,全局 ID 自动作为组件的 name。
说人话就是,全局注册识别的是被注册组件定义的name属性,而不是组件的文件名。所以组件中的name属性必须要写,最好name属性和文件名保持一致,避免不必要的问题产生。而局部注册组件,则是以导入时的名称为主,与组件里的name可以不一致。
更多推荐
已为社区贡献1条内容
所有评论(0)