Vue组件之全局注册

时间 2019-11-21 标签 vue 组件全局注册

前言: 在vue中对于一些复用性比较高的组件,为了不频繁的import...导入操做,咱们能够将其注册为全局组件,下来呢,咱们一块儿来搞点事情,对->盘它(注册全局组件).html

先说明下,一共是两种方式,我称其为手动和自动方式,手动顾明思议就是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;
复制代码

或者vue

<!--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两句,主要是一些建议(想法).npm

建议使用暴露install()方法的注册方式,有疑问能够戳这里.
组件的命名建议使用PascalCase(首字母大写方式),模板中引用建议使用kebab-case(短横线分隔方式).

END

云为车兮风为马，玉在山兮兰在野。app