前言: 在vue中对于一些复用性比较高的组件,为了避免频繁的import...导入操作,我们可以将其注册为 全局组件,下来呢,我们一起来搞点事情,对->盘它(注册全局组件).
- 先说明下,一共是两种方式,我称其为手动和自动方式,手动顾明思议就是emmm那种意思,大伙都懂,自动估计也懂.能用代码说明的我尽量在代码内bb,ok,撸起来!
基础工作
- utils目录下创建一个js文件,这里就命名为globalComponents.js.
- npm install --save lodash,里面的某些处理函数需要用到,比较方便.
- components目录下创建组件,这里要被注册为全局的组件我都以Base作为前缀命名.
<!--main.js文件-->
import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'
//第三方库
import _ from 'lodash'
Vue.use( _ )
//全局组件
import GL_Component from '@/utils/globalComponents'
Vue.use(GL_Component);
Vue.config.productionTip = false
new Vue({
store,
router,
render: h => h(App)
}).$mount('#app')
方式1(手动注册)
<!--globalComponents.js-->
//引入
import BaseComponentA from '@/components/BaseComponentA'
import BaseComponentB from '@/components/BaseComponentA'
function plugins (Vue) {
//注册
Vue.component('BaseComponentA',BaseComponentA); //第一个参数:组件名称,第二个参数:要注册的组件
Vue.component('BaseComponentB',BaseComponentB);
}
export default plugins;
或者
<!--globalComponents.js-->
//引入
import BaseComponentA from '@/components/BaseComponentA'
import BaseComponentB from '@/components/BaseComponentA'
const plugins = {
//注册
install(Vue) {
Vue.component('BaseComponentA',BaseComponentA); //第一个参数:组件名称,第二个参数:要注册的组件
Vue.component('BaseComponentB',BaseComponentB);
}
}
export default plugins;
然后main.js入口文件中导入globalComponents.js文件Vue.use()即可.那麽在需要应用的组件中使用kebab-case在模板中直接引用就ok,最后我会贴出来图,稍后.
方式2(自动注册)
<!--globalComponents.js-->
const plugins = {
install(Vue) {
const requireComponent = require.context(
// 其组件目录的相对路径(组件目录相对于当前js文件的路径)
'../components',
// 是否查询其子目录
false,
// 匹配基础组件文件名的正则表达式(因此要注册为全局组件的组件名称约定很重要)
/Base[A-Z]\w+\.(vue)$/
)
requireComponent.keys().forEach(fileName => {
// console.log(fileName) ./BaseComponentA.vue
// 获取组件配置
const componentConfig = requireComponent(fileName) //这里的componentConfig包含当前fileName对应组件的所有该组件信息,等于拿到了当前组件实例
// 获取组件的 PascalCase 命名
const componentName = _.upperFirst( //这里 _ 代表main.js中引入的的lodash实例对象
_.camelCase(
// 获取和目录深度无关的文件名
fileName
.split('/')
.pop()
.replace(/\.\w+$/, '') //将.(包括.)字符以后的字符用''代替
)
)
// 全局注册组件
Vue.component(
componentName,
// 如果这个组件选项是通过 `export default` 导出的,
// 那么就会优先使用 `.default`,
// 否则回退到使用模块的根。
componentConfig.default || componentConfig
)
})
}
}
export default plugins;
组件中应用
以上就是vue中注册全局组件的方式了,虽然不是很难,但我还是想再多bb两句,主要是一些建议(想法).
- 建议使用暴露install()方法的注册方式,有疑问可以戳这里.
- 组件的命名建议使用PascalCase(首字母大写方式),模板中引用建议使用kebab-case(短横线分隔方式).
END
云为车兮风为马,玉在山兮兰在野。