Vue组件之全局注册

前言: 在vue中对于一些复用性比较高的组件,为了避免频繁的import...导入操作,我们可以将其注册为 全局组件,下来呢,我们一起来搞点事情,对->盘它(注册全局组件).

• 先说明下,一共是两种方式,我称其为手动和自动方式,手动顾明思议就是emmm那种意思,大伙都懂,自动估计也懂.能用代码说明的我尽量在代码内bb,ok,撸起来!

基础工作

1. utils目录下创建一个js文件,这里就命名为globalComponents.js.
2. npm install --save lodash,里面的某些处理函数需要用到,比较方便.
3. 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(短横杠连接方式).