Vue3/Vue2中全局组件的注册使用

Vue中全局组件的注册

我们经常会在利用Vue开发的项目中，多次重复使用某一段代码结构，这就需要我们把它封装成公共组件，注册在全局进行多次复用。

Vue 官方提供的常规方法

1. 在Vue项目中src/components路径下补充创建 文件夹名（xxx）/ index.vue，在此vue组件中写入自己需要服用多次的代码结构
2. 在src/main.js文件中

import Vue from 'vue'
// 引入封装的复用的组件 注意xxx组件名应采用大驼峰命名法，例如：PageTool
import xxx from '@/components/文件夹名（xxx）' 
Vue.component('xxx',xxx) // 在全局用Vue.component()方法全局注册

3. 在需要此组件的另一组件中直接嵌套使用即可

<template>
  <div>
    <!-- 直接使用即可 -->
    <xxx /> 
  </div>
</template>

然而，以上方法只适用于整个项目中需要复用封装的组件较少的情况下，当组件数量变得多时，main.js文件中的代码结构就显得冗余，很难管理，因此当复用组件较多时我更推荐采用下面这种帆方法。

Vue.use( ) 方法注册

Vue.use( ) 它是Vue提供一个静态方法，用来向Vue注册插件(增强vue的功能)。
参考文档：Vue.use( )

想必在Vue的项目中的已经见过此方法的使用实例，并不陌生了

Vue.use(VueRouter) // 挂载router路由
Vue.use(Vuex) // 挂载store
Vue.use(vant) // 挂载vant第三方组件库

在使用之前，先来了解一下此方法的基本使用

Vue.use(obj)

说明:

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

具体使用步骤

1. 在Vue项目中src/components路径下补充创建 文件夹名（xxx）/ index.vue，在此vue组件中写入自己需要服用多次的代码结构
2. 在Vue项目中src/components路径下补充创建 index.js文件，代码片段如下

// 引入封装的复用的组件 注意xxx组件名应采用大驼峰命名法，例如：PageTool
// vue2.0
import 组件对象 from './文件夹名（xxx）'
export default {
  install(Vue) {
    Vue.component('组件对象', 组件对象)
  }
}

// vue3.0
import 组件对象 from './文件夹名（xxx）'
export default {
  install(app) {
    app.component('组件对象', 组件对象)
  }
}

// 批量导入全局注册（组件过多时）
// 导入存放需要全局注册的组件所在的文件夹内的所有.vue文件
// 批量导入需要使用一个函数 require.context(dir,deep,matching)
// 参数：1. 目录(文件夹所在位置)  2. 是否加载子目录true/false  3. 加载的正则匹配(以.vue为结尾的文件)
const importFn = require.context('./', false, /\.vue$/)
// console.dir(importFn.keys()) 文件名称数组
export default {
  install(app) {
    // 批量注册全局组件
    importFn.keys().forEach(key => {
      // 导入组件
      const component = importFn(key).default
      // 注册组件
      app.component(component.name, component)
    })
  }
}

/* 当有多个因需要复用而封装的组件时，全部可以导入在此文件中，并进行Vue.component()注册，而不再需要操作main.js 文件，方便管理 */

总结：

• require.context() 是webpack提供的一个自动导入的API
  • 参数1：加载的文件目录
  • 参数2：是否加载子目录
  • 参数3：正则，匹配文件
  • 返回值：导入函数 fn
    • keys() 获取读取到的所有文件列表

3. 在main.js文件中，代码片段如下

// Components 为上面在 index.js 文件中默认导出的对象
// vue2.0
import Components from './components/index.js'
Vue.use(Components) // 全局注册使用
// vue3.0
import { createApp } from 'vue'
import Components from './components/index.js'
createApp(App).use(store).use(router).use(Components).mount('#app')// 全局注册使用

4. 在需要此组件的另一组件中直接嵌套使用即可

<template>
  <div>
    <!-- 直接使用即可 -->
    <组件对象名 /> 
  </div>
</template>