vue全局注册组件和指令

区分全局和局部

全局

当你注册完之后，可以在任何组件中直接使用标签，而不需要在各个组件中引入并局部注册
通常公共组件放在src文件夹下的components文件夹中，这里的组件进行全局注册。

局部

页面中私有的组件放在各自的页面文件夹中并使用下面代码局部注册

import ComponentA from './ComponentA'
import ComponentB from './ComponentB'
export default {
  name: "part",
  components: { ComponentA, ComponentB },
}

全局注册方法

1、在src文件夹中新建utils文件夹，utils文件夹中一般存放通用的辅助文件(方法、数据等)
2、在文件夹中新建components.js文件
3、在components.js文件引入所有要注册的全局组件
4、在main.js中引入components.js文件并使用Vue.use()全局注册

代码

utils - components.js

import ComponentA from '@/components/ComponentA' // ComponentA
import ComponentB from '@/components/ComponentB' // ComponentB

export default (Vue)=>{
  Vue.component("ComponentA", ComponentA)
  Vue.component('ComponentB', ComponentB)  
}

main.js

import components from '@/utils/components.js'
Vue.use(components)

new Vue({
  // ...
})

使用

<component-a></component-a>

vue全局注册组件优化

我们需要借助一下神器webpack，使用 require.context() 方法来创建自己的模块上下文，从而实现自动动态require组件。这个方法需要3个参数：要搜索的文件夹目录、是否还应该搜索它的子目录、以及一个匹配文件的正则表达式。
我们在components文件夹添加一个叫componentRegister.js的文件，在这个文件里借助webpack动态将需要的基础组件统统打包进来。

/src/components/componentRegister.js

import Vue from 'vue'

/**
 * 首字母大写
 * @param str 字符串
 * @example heheHaha
 * @return {string} HeheHaha
 */
function capitalizeFirstLetter(str) {
  return str.charAt(0).toUpperCase() + str.slice(1)
}

/**
 * 对符合'xx/xx.vue'组件格式的组件取组件名
 * @param str fileName
 * @example abc/bcd/def/basicTable.vue
 * @return {string} BasicTable
 */
function validateFileName(str) {
  return /^\S+\.vue$/.test(str) &&
    str.replace(/^\S+\/(\w+)\.vue$/, (rs, $1) => capitalizeFirstLetter($1))
}

const requireComponent = require.context('./', true, /\.vue$/)

// 找到组件文件夹下以.vue命名的文件，如果文件名为index，那么取组件中的name作为注册的组件名
requireComponent.keys().forEach(filePath => {
  const componentConfig = requireComponent(filePath)
  const fileName = validateFileName(filePath)
  const componentName = fileName.toLowerCase() === 'index'
    ? capitalizeFirstLetter(componentConfig.default.name)
    : fileName
  Vue.component(componentName, componentConfig.default || componentConfig)
})

文件夹结构：

components
│ componentRegister.js
├─BasicTable
│ BasicTable.vue
├─MultiCondition
│ index.vue

这里对组件名做了判断，如果是index的话就取组件中的name属性处理后作为注册组件名，所以最后注册的组件为：multi-condition、basic-table
最后我们在main.js中import 'components/componentRegister.js'，然后我们就可以随时随地使用这些基础组件，无需手动引入了~

指令

全局指令的注册方法同全局组件
1、在src文件夹中新建utils文件夹，utils文件夹中一般存放通用的辅助文件(方法、数据等)
2、在文件夹中新建directives.js文件
3、在directives.js文件引入所有要注册的全局指令
4、在main.js中引入directives.js文件并使用Vue.use()全局注册

代码

utils - directives.js

export default (Vue)=>{
    Vue.directive("focus", {
        inserted: function (el) {
            el.focus();
        }
    })
}

main.js

import directives from '@/utils/directives.js'
Vue.use(directives)

new Vue({
  // ...
})

vue全局注册组件和指令