井井客

搜索

如何更方便的管理vue全局组件

刚开始我们会在入口文件中注册VUE全局组件,但是多人合作时频繁修改入口文件的话可能会造成代码冲突。所以我们需要单独去建一个JS去保存组件并注册到全局。

如何更方便的管理vue全局组件

刚开始我们在入口文件main.js/app.js中,这样注册全局组件:

//获取位置
import topCom from "./components/top";
//注册到全局
Vue.component('topCom', topCom);

现在我们可以直接在components文件夹下,新建一个index.js,然后为它添加内容:

//获取位置
import topCom from "./top";
import footCom from "./foot";
//模块化
export default {
    topCom,
    footCom
}

以后components下如果有新增的全局注册可以只修改这个index.js就可以了。

同时别忘记最一步,去全局注册一下(main.js/app.js):

//通过components下的index.js文件导入组件
import components from './components/';
//对导入的组件进行全局组件注册
Object.keys(components).forEach((key)=>{
	Vue.component(key,components[key])
})

这样以后就可以方便的去全局组件进行管理了。

而在所有页面中,我们可以使用全局组件topCom和footCom,无须再去分别注册了~

文章TAG:VUE

作者:井井客原创来源:原创
本文标题:如何更方便的管理vue全局组件
本文链接:/c/06259.html

上一篇:commit(vuex)将vue中定义的对象/数组传参需要注意
下一篇:vue2使用axios代替vue-resource

文章分类

相关阅读

随便看看