注册全局局部实战组件自动化(组件注册全局局部实战)「组件注册可以全局注册和局部注册」

注册全局局部实战组件自动化(组件注册全局局部实战)

组件是 vue最强大的功能之一,在项目中我们经常会用到很多可复用的代码块,通过封装可重用的代码不仅提高了组件的可重用性,而且每个 Vue 组件都是Vue的实例,可接受相同的选项对象并提供相同的生命周期钩子。
这就让项目调试起来更加简单方便,整个开发效果也更高,可维护性也更强,也能适合多人协同开发来构建大型应用。
同时组件也是资源独立的,组件在系统内部可复用,组件和组件之间也可以嵌套。
​定义Vue组件Vue组件本质上是一个对象,该对象包含HTML标签、props、data、created、computed、watch、mounted、methods、components 、css样式等成员属性。
我们可以通过创建一个.vue文件来定义组件,组件命名的方式可以使用“kebab-case”方式,即单词之间采用 - (短横线)连接;或者使用“PascalCase”方式(驼峰式命名),即单词之间首字母大写。
比如之前定义的网格组件auxiliary-grid.vue组件,这里用到了HTML标签、props、data、watch、mounted、methods、css样式等成员属性。
局部注册组件组件在vue实例内部进行局部注册时,该组件只能在vue实例控制范围内使用(即注册到哪一个DOM元素下则在哪个DOM元素下生效)。
局部注册可以使用vue实例对象中的components属性来实现,auxiliaryGrid这个变量名是用在模板中的自定义元素的名称,我们可以使用该变量名在模板中调用对应的组件。
全局注册组件顾名思义就是将组件注册在Vue根实例模板中,这样在根组件下的任何子组件中都可以使用该组件(组件内部也是可以调用自己的)。
当某个组件在项目中使用频率很高且使用地方很广时,就可以考虑将改组件注册成全局组件。
Vue注册一个全局组件可以在main.js文件中使用 Vue.component(componentName, options)命令来实现,componentName为组件定义的名称,options为需要注册的组件对象。
自动化注册全局组件上面是一个最简单的全局注册例子,每注册一个组件之前都需要先通过import来引入该组件,然后再使用用 Vue.component()命令来注册组件。
当注册的全局组件较多的时候会让main.js文件中内容变的很多很乱且不易维护,能不能定义一个函数来自动加载指定目录下的vue组件实现自动化完成全局注册。
为了更好的管理项目我们通常在定义通用组件的时候会统一放在components目录下,我们在components中创建一个index.js来扫描当前目录下的vue组件并实现自动注册。
require.context的使用可以参考文章:Vue实战061:webpack中的require.context使用详解,这里定义的componentConfig.default || componentConfig是为了兼容import export和require model.export两种导出规范。
最后别忘了在main.js文件中引入我们刚刚定义的index.js文件。
总结:以上内容是小编给大家分享的Vue实战070:组件的局部注册和全局注册(含自动化注册)功能的实现,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。
更多Vue实战技巧可以参考专栏:Vue实战系列,在此也非常感谢大家对小编的支持。

联系我们

在线咨询:点击这里给我发消息