vue：vue2与vue3如何全局注册公共组件（包括涉及到的相关方法函数的讲解）

news2024/11/29 2:39:54

第一章 vue2全局注册公共组件

1.1 方法一：逐个注册

1.2 方法二：批量注册

1.2.1 require.context()方法解释

第二章 vue3全局注册公共组件

1.1 方法一：逐个注册

1.2 方法二：批量注册

第一章 vue2全局注册公共组件

Vue.component() // vue2注册组件的方法

1.1 方法一：逐个注册

import BreadCrumbs from '@/components/BreadCrumbs.vue'
import HomeBanner from '@/components/HomeBanner.vue'
import HomeBottom from '@/components/HomeBottom.vue'
import TabChange from '@/components/TabChange.vue'
import NewTabs from '@/components/NewTabs.vue'
……

export default {
    // vue2自带的方法
    install: function (Vue) {
        // 注册全局容器
        Vue.component('BreadCrumbs', BreadCrumbs)
        Vue.component('HomeBanner', HomeBanner)
        Vue.component('HomeBottom', HomeBottom)
        Vue.component('TabChange', TabChange)
        Vue.component('NewTabs', NewTabs)
        ……
    },
}

// 引入公共主键(上面的方法在该文件下)
import components from '@/plugin/components'

// 使用公共组件
Vue.use(components)

1.2 方法二：批量注册

import Vue from 'vue'

// vue2方法 ——> 自动注册全局组件
const componentsContext = require.context('./', true, /\.vue$/)

componentsContext.keys().forEach((component) => {
    const componentConfig = componentsContext(component)
    /**
     * 兼容 import export 和 require module.export 两种规范
     */
    const ctrl = componentConfig.default || componentConfig
    Vue.component(ctrl.name, ctrl)
})

require.context()方法官网：

require-context - npm

1.2.1 require.context()方法解释

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

console.log('componentConfig', componentsContext)
console.log('require',require.prototype)

通过控制台中打印require，发现require其实就是就是一个函数
通过require的原型，发现require的方法有三个属性：id、key、resolve
属性解释：

resolve：是一个函数，并返回已解析请求的模块id
key：函数是否返回上下文模块可以处理的所有可能请求的数组

require.context(directory,useSubdirectories,regExp)参数介绍：

directory：表示要检索的目录
useSubdirectories：表示是否检索目录下的子文件夹
regExp：匹配文件的正则表达式，一般是文件名

例如：

require.context('./', true, /\.vue$/) // 匹配该文件夹下.vue后缀的文件夹

第二章 vue3全局注册公共组件

app.component() // vue3注册组件的方法

1.1 方法一：逐个注册

import BreadCrumbs from '@/components/BreadCrumbs.vue'
import HomeBanner from '@/components/HomeBanner.vue'
import HomeBottom from '@/components/HomeBottom.vue'
import TabChange from '@/components/TabChange.vue'
import NewTabs from '@/components/NewTabs.vue'
……

import { createApp } from 'vue'

const app = createApp(App)

registerVantComponent(app)

export default {
    registerVantComponent: function (app) {
        // 注册全局容器
        app.component('BreadCrumbs', BreadCrumbs)
        app.component('HomeBanner', HomeBanner)
        app.component('HomeBottom', HomeBottom)
        app.component('TabChange', TabChange)
        app.component('NewTabs', NewTabs)
        ……
    },
}

1.2 方法二：批量注册

方案一：


import { defineAsyncComponent } from 'vue'

/**
 * @description 自动将 ./src/components/global 下的组件注册成为全局组件
 * @param  app 当前应用实例
 * @returns {void} void
 */

const components = import.meta.glob('./*.vue')

export function registerGlobalComponent(app) {
    // 组件注册成为全局组件
    for (const [key, value] of Object.entries(components)) {
        const name = key.slice(key.lastIndexOf('/') + 1, key.lastIndexOf('.'))
        app.component(name, defineAsyncComponent(value))
    }
}

方案二：


/**
 * @description 自动将 ./src/components/global 下的组件注册成为全局组件
 * @param  app 当前应用实例
 * @returns {void} void
 */

export function registerGlobalComponent(app) {
    // 组件注册成为全局组件
    const components = import.meta.globEager('./*')

    for (const path in components) {
        if (path.includes('.vue')) {
            let componentName = path.match(/(.*)\.vue$/)[1]
            if (componentName.includes('./')) {
                componentName = componentName.replace('./', '')
            }
            const component = components[path].default
            app.component(componentName, component)
        }
    }
}

针对于vue3的批量注册小编提供了两种方案(注意vue3不支持require方法了)，思路与vue2注册是一致的，都可行的，但是小编更推荐方案一，因为方案二小编在项目上线的过程中遇到了低版本手机不兼容导致项目不兼容跑不动的bug
import.meta.glob()是一个 ES 模块的特殊属性，用于动态导入多个模块，该方法接受一个模式字符串作为参数，并返回promise，该Promise 析为一个对象，该对象包含匹配该模式的所有模块的键值对
该例子中：import.meta.glob('./*.vue') —— './' 表示同目录下(也可以自定义其他目录)；'*' 表示任意名称；'.vue' 后缀
import.meta.globEager() 是 Webpack 5 和 Deno 这样的现代 JavaScript 环境中引入的一个特性，用于异步加载模块和文件。meta 属性是 ES2020 中引入的，它允许直接访问到 import 语句的元信息，包括导入路径列表。globEager 是对 import.meta.glob 的增强版本，它提供了立即同步加载所有匹配给定模式（如 **/*.js）的模块的能力。但是这个特性并非浏览器原生支持，而是由一些工具如 Vite 或 Deno 提供的扩展。在使用浏览器环境中尝试使用它，可能会遇到兼容性问题。