语法回顾

全局组件

//  定义全局组件的格式
import 组件对象 from 'xxxxx.vue'
Vue.component('组件名', 组件对象)

局部组件

//  定义局部组件的格式
import xxxx from 'xxxxx.vue'
export default {
	components: {
	   xxxx
	}
}

两者使用区别：

全局组件：适用较多场景复用的代码，注册后在项目的任意组件中可直接使用；

局部组件：适用代码复用率较低的情况，注册后只能在当前组件内使用；

注册全局组件常规方式

步骤如下：

1.首先在src目录下新建一个Components文件夹。

2.新建要封装的组件名为子级文件夹，并再定义一个要预备作为全局组件.vue,文件名PageTools.vue

3.在main.js中导入这个组件

4.在其他页面中，均可以直接使用page-tools

import PageTools from '@/components/PageTools'

 Vue.component('PageTools', PageTools)

封装式注册全局组件

优点：避免导致main.js文件内容太多，进行抽离，若有较多组件需注册使用，无须再更改main.js文件，只需要在封装的公共组件index.js文件中添加即可

其它步骤和常规方式相同，只是多了封装组件步骤：

1.在Components文件夹下 新建index.js文件

2.注册公共组件到全局;

3.在其他页面中，均可以直接使用page-tools

封装的公共组件index.js文件

import Vue from 'vue'  //引入vue不然会报错
 
import PageTools from '@/components/PageTools'  //引入所需要使用的公共组件


Vue.component('PageTools', PageTools)

main.js文件

//直接导入已封装的全局组件

import '@/components'

Vue.use注册全局组件

结合官方解释，可以得出结论，Vue.use 可以接收一个对象/函数

参数为对象时

0. Vue.use 接收一个对象，Vue.use(obj)
1. 对象obj中需要提供一个 install 函数
2. 在 Vue.use(obj) 时，会自动调用该 install 函数，并传入 Vue构造器

封装的公共组件index.js文件

//导入公共组件PageTools.vue

import PageTools from '@/components/PageTools'


//导出PageTools组件

export default {

  install(Vue) {   // 此处是 install: function(Vue)简写
  
    Vue.component('PageTools', PageTools)
   }
}

main.js文件

import PageTools from '@/components'

Vue.use(PageTools)   

参数为函数时

main.js文件与上述一样，主要不同时index.js文件

封装的公共组件index.js文件

//导入公共组件PageTools.vue

import PageTools from '@/components/PageTools'

//如果有多个公共组件需要注册，则需多次引入

import **** from '@/components/****'


//导出PageTools组件

export default function(Vue) {

 Vue.component('PageTools', PageTools)
  Vue.component('后续要注册的组件名', 组件对象)
 ......
 }
 

require.context()批量注册组件

优点：当项目中公共组件较多时，无须更改main.js和所封装的公共组件文件，可自动批量帮我们注册组件。

基本语法及说明

接受三个参数（require.context(directory,useSubdirectories,regExp)）

• 参数一：表示文件路径，一般指要搜索的文件夹目录；
• 参数二：深层次查找，布尔类型；若为true，则会搜索它的子目录，false则会同级目录文件搜索；
• 参数三：匹配的文件后缀，一般使用正则表达式

返回参数

require.context返回一个require 函数，此函数可以接收一个参数

函数有三个属性：resolve 、keys、id

        · resolve: 是一个函数，他返回的是被解析模块的id ，接受一个参数request。

        · keys: 也是一个函数，他返回的是一个数组，该数组是由所有可能被上下文模块解析的请求对象组成

        · id：上下文模块的id

封装的公共组件index.js文件

export default {

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

    // 遍历出每个组件的路径
    // keys：是一个函数，它返回一个数组，由所有可能被上下文模块处理的请求组成。
    requireComponent.keys().forEach((item) => {
      

      const moduleDefault = requireComponent(item).default // 组件所暴露出的对象


      Vue.component(moduleDefault.name, moduleDefault)
      
      // 使用moduleDefault.name前提每个组件中必须起名name，未起名则会报错；
    })
  }
}

main.js文件

//导入所定义的对象

import pluginCom from '@/components'

Vue.use(pluginCom)   

组件未起名会涉及的bug

引申---require.context()遍历目录下所有图片