本文列出所有主流在vue中批量注册全局组件的方法
本文下面所有例子的组件目录如下:
方法一:直接在main.js中循环遍历注册
1.在main.js中
// 引入所有需要注册的全局组件 import aboutView from '@/components/common/aboutView.vue' import infoView from '@/components/common/infoView.vue' //定义一个数组结构 const components = [ { name: 'aboutView', component: aboutView }, { name: 'infoView', component: infoView }, ]; //遍历数组进行循环注册 components.forEach(component => { Vue.component(component.name, component.component); });
方法二:利用vue的插件模式
1.在register.js中
// 引入所有需要注册的全局组件 import aboutView from './aboutView.vue' import infoView from './infoView.vue' const globalComponents = [aboutView, infoView]; export default { install (Vue) { globalComponents.forEach(component => { // 这里用的是组件里面的name //如果引入的组件没有写name,会报错 : vue.esm.js:100 Uncaught TypeError: Cannot read properties of undefined (reading 'toLowerCase') Vue.component(component.name, component); }); } }
2.在main.js中
// 引入全局注册组件 import globalComponent from '@/components/common/register.js' Vue.use(globalComponent)
方法三:使用自动化导入,请注意文件路径
1.在main.js中
const componentContext = require.context('@/components/common', true, /\.vue$/); componentContext.keys().forEach(fileName => { //获取当前遍历的组件 const componentConfig = componentContext(fileName); //获取当前组件的文件名称 const componentName = fileName.replace(/^\.\//, '').replace(/\.\w+$/, ''); //注册组件 Vue.component(componentName, componentConfig.default || componentConfig); });
上述代码会自动匹配components/common
目录下以.vue
为后缀的组件文件,并自动注册为全局组件
方法四:使用Vue插件和组件自动化注册(推荐)
1.在register.js中
const VueAutoRegister = { install (Vue) { //获取所有的vue文件 const requireComponent = require.context('@/components/common', true, /\.vue$/); requireComponent.keys().forEach(fileName => { //获取当前遍历的组件 const componentConfig = requireComponent(fileName); //获取当前组件的文件名称 const componentName = componentConfig.default.name || fileName.replace(/^\.\/(.*)\.\w+$/, '$1'); //把文件名称当成组件名称,全局注册 Vue.component(componentName, componentConfig.default || componentConfig); }); } }; export default VueAutoRegister;
2.在main.js中
// 引入全局注册组件 import globalComponent from '@/components/common/register.js' Vue.use(globalComponent)
标签:vue,const,component,js,注册,组件,全局 From: https://www.cnblogs.com/wiliam/p/17585881.html